jquery 使用animate来改变高度时会自动在样式添加overflow:hidden(When jQuery uses animate to change the height, it will automatically add overflow: hidden in the style)

使用jQuery animate做自定义动画,动画里面改变高度,发现浏览器访问时会自动在样式添加overflow:hidden。

被这问题坑惨了,始终找不到原因,后来百度才知道:

jQuery 的 anmiate 会自动添加overflow:hidden;

这时候在css中这样写 overflow:visible !important;

(也就是在哪个元素做动画就在哪个元素的css里写这个属性)

注意啊 如果写在行内样式 还是会被覆盖;

css代码:

ul li {
            width: 69px;
            height: 69px;
            float: left;
            margin-left: 10px;
            position: relative;
            overflow: visible !important;
        }

js代码:

$(function () {
            $(‘li’).mouseenter(function () {
        
                $(this).stop().animate({
                        width: 224,
                    }).find(‘.small’).stop().fadeOut().siblings()
                    .stop().fadeIn();
             
            })
————————

Use jQuery animate to make custom animation, change the height in the animation, and find that overflow: hidden will be automatically added to the style when the browser accesses.

I was so miserable by this problem that I couldn’t find the reason. Later, baidu knew:

jQuery 的 anmiate 会自动添加overflow:hidden;

This is written in CSS at this time   overflow:visible ! important;

(that is, the attribute is written in the CSS of the element in which the animation is performed)

Note that if it is written in the line, the style will still be overwritten;

CSS code:

ul li {
            width: 69px;
            height: 69px;
            float: left;
            margin-left: 10px;
            position: relative;
            overflow: visible !important;
        }

JS code:

$(function () {
            $(‘li’).mouseenter(function () {
        
                $(this).stop().animate({
                        width: 224,
                    }).find(‘.small’).stop().fadeOut().siblings()
                    .stop().fadeIn();
             
            })