jquery的animate设置样式overflow:hidden的解决方法

最新推荐文章于 2023-09-23 08:38:47 发布

dragoo1

最新推荐文章于 2023-09-23 08:38:47 发布

阅读量7.7k

点赞数

分类专栏： javascript jquery 文章标签： jquery animate overflow hidden

本文链接：https://blog.csdn.net/dragoo1/article/details/50476689

版权

javascript 同时被 2 个专栏收录

56 篇文章 0 订阅

订阅专栏

jquery

11 篇文章 0 订阅

订阅专栏

环境：win7 64位,chrome44.0.2403.125,firefox43.0.4,ie11.0.9600.18124IS

问题：有个变高变宽的div，内嵌一个img，但是动画执行时img被overflow:hidden设置后只能看到一部分

解决方法1：

$(myDiv).animate(
   { height: newHeight},
   { duration: 500, 
     queue: false, 
     easing: 'easeOutExpo', 

     step: function() {
       $(myDiv).css("overflow","visible");
     }, 

     complete: function() {
       $(myDiv).css("overflow","visible");
     }
   }
);

参考：https://bugs.jquery.com/ticket/2648#no1

ps:好像complete不需要

解决方法2：

Another way is to declare the element as !important in css.
For example.

.somediv { overflow: visible !important;}

总结：jQuery.animate sets overflow:hidden as an inline style. Inline styles always take precedence over the !important flag

参考：http://stackoverflow.com/questions/3363035/jquery-animate-forces-style-overflowhidden

http://www.cnblogs.com/aim-at-is-the-tao-in/p/3753596.html

http://baike.baidu.com/link?url=3-wPSomyYQz7FtnSEqD1DlLxQTIu6TeJkXomazajR4ZKodLbgxLnYlrIxRmwwEhNNqnm_k7CslzAf8KJ19Vkj_