Question

你知道为什么我不能用jQuery为绝对定位div设置动画吗？

请在这里显示（这是我的例子）：

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);
});

黑盒子在动画隐藏期间！但我不知道为什么？

你可以帮我吗？

Answer 1

jQuery会在您使用.animate时隐藏溢出，因此请将代码更改为

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"

Answer 2

当jQuery为框设置动画时，<overflow: hidden会在.box上设置。 .arrow .box溢出，因此消失了。考虑更改标记。

Answer 3

您还可以重新排列元素以获得相同的效果（使用float:left和display:inline-block）

http://jsfiddle.net/mkVrL/

jQuery Animate - 不会为绝对DIV制作动画

3 个答案: