jQuery Animate – 不会动画绝对DIV

前端之家收集整理的这篇文章主要介绍了jQuery Animate – 不会动画绝对DIV前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
你知道为什么我不能使用jQuery动画一个绝对定位的div?

显示请在这里(这是我的例子):

http://jsfiddle.net/2VJe8/

HTML:

<html>
<body>
    <div class="test">
        <div class="Box">
            <div class="arrow"></div> 
        </div>
        <a href="#" class="btnStartAni">Animate</a>
    </div>
</body>

CSS:

.test { margin: 0; padding: 0;}
.test .Box { width: 150px; height: 140px; background-color: red; position: relative; }
.test .Box .arrow { width: 50px; height: 50px; background-color: black; position: 
absolute; bottom: 0; right: -50px;}​

JavaScript的:

jQuery(".test a.btnStartAni").on("click",function(e){
   e.preventDefault();
  jQuery(".Box").animate({ width: 400},800);
});

黑盒子在动画隐藏!但我不知道为什么?

你能帮我吗?

解决方法

当使用.animate时,jQuery会导致溢出被隐藏,所以将代码更改为
jQuery(".test a.btnStartAni").on("click",function(e){
    e.preventDefault();
    jQuery(".Box").animate({ width: 400},800).css('overflow','visible');
});
​

它应该工作

JsFiddle:http://jsfiddle.net/2VJe8/1/

资料来源:jQuery .animate() forces style “overflow:hidden”

猜你在找的jQuery相关文章