4

jqueryを使用して要素にカーソルを合わせると、表示および非表示（slideUpとslideDown）になるドロップメニューがあります...

$("#element").hover( function() {
    $(this).next().clearQueue();
    $(this).next().slideDown(); //animate({height:300},100);
}, function() {
    if (!$(this).next().is(':hover')) {
        $(this).next().clearQueue();
        $(this).next().slideUp(); //animate({height:0},100);
    }
});

最初は clearQueue() という行を含めていませんでしたが、これにより、ユーザーが #element の上や外に不規則にホバーすると、slideUp/Down が長い間キューに入れられてアニメーション化されました。

その行を追加すると、ユーザーが非常に速くホバリングしたり外に出たりすると、ドロップダウンが完全に表示されないことを意味します。

これは、slideDown をアニメーション化することで回避できますが、問題は、アニメーション化する必要がある正確な高さが変化する可能性があるためわかりません。

とにかくこの動作を止める方法はありますか?

4

1 に答える 1

0

私はslideUpとslideDownで同様の問題を抱えていました.slideDownはアニメーション中に要素に静的な高さを与えますが、コンテンツはいつでも変更される可能性があるため、要素は動的なサイズのままでなければなりません. animationFinished コールバックで CSS の高さの値を空の文字列 (つまり '') に設定することで、これを修正しました。

したがって、これで問題が解決するはずです：

$("#element").hover(function () {
    $(this).next().stop(true).slideDown(400, function () { // .stop(true) is basically the same as .clearQueue() except that it only stops and clears animations
        $(this).css('height', '');
    }); //animate({height:300},100);
}, function () {
    if (!$(this).next().is(':hover')) {
        $(this).next().stop(true).slideUp(); //animate({height:0},100);
    }
});
于 2012-12-13T17:24:21.420 に答える