3

これは私のコードです（ここのフィドルを参照）：

$('div').on('click', function () {
    $('.well')
        .stop()
        .animate({
        height: "toggle",
        opacity: "toggle"
    });
});

以下のものを含むブートストラップ.wellがあります。以下のものを見て、アニメーションの開始時と終了時の不連続性に注意してください。

これらのアニメーションの不連続性を回避するにはどうすればよいですか？

4

2 に答える 2

3

これをチェックしてくださいhttp://jsfiddle.net/dLVWr/1/：

html：

<div>Click to show/hide</div>
<div class='container'>
    <div class='well'>....</div>
</div>
<div>Stuff below</div>

js：

$('div').on('click', function () {
    $('.container')
        .stop()
        .animate({
        height: "toggle",
        opacity: "toggle"
    });
});

コードの問題は、welldivにテキストの高さとパディングの両方があることです。不透明度と高さを切り替える場合、最初に、コンテンツの高さはゼロ、つまりパディングです。それがそのジャンプを引き起こすものです。

これを回避するには、適用するdivに.animateマージン/パディングがないことを確認してください。

于 2013-02-09T15:18:37.307 に答える
1

コンテンツの高さをアニメーション化し、コンテンツの外側の高さを無視しているため、小さなキックインがあります。

これは、要素のが切り替えられるとpadding、、borderおよびmargin値が開始されることを意味しますdisplay。つまり、非表示でアニメーションが完了した直後、または表示時にアニメーションが開始された直後です。

.slideToggle()代わりに使用する必要があります。

$('div').on('click', function () {
    $('.well').stop().animate();
});
于 2013-02-09T15:31:17.187 に答える