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（）はスタイル「overflow：hidden」を強制します

于 2012-12-15T15:23:41.470 に答える
2

overflow: hidden.boxjQueryがボックスをアニメーション化するときにオンに設定されます。.arrowからオーバーフローし.boxて消えます。マークアップを変更することを検討してください。

于 2012-12-15T15:23:25.443 に答える
1

同じ効果を得るために要素を再配置することもできます（とを使用float:leftしてdisplay:inline-block）

http://jsfiddle.net/mkVrL/

于 2012-12-15T15:35:05.033 に答える