9

你知道为什么我不能用 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>

​</p>

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

​</p>

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

你能帮我吗？

4

3 回答 3

11

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() 强制样式“溢出：隐藏”

于 2012-12-15T15:23:41.470 回答
2

overflow: hidden.box当 jQuery 为框设置动画时被设置。.arrow溢出，.box然后消失。考虑更改标记。

于 2012-12-15T15:23:25.443 回答
1

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

http://jsfiddle.net/mkVrL/

于 2012-12-15T15:35:05.033 回答