0

私は単純なスライドアウトタブに取り組んでいます。

このスクリプトは、div - '#slideout' を、マウスが '#tabFeature1' の上にあるときにスライド インし、mouseout でスライド アウトします。

望ましくない副作用を除いて、すべてが機能しています。効果がスタックする場合 - 各マウスオーバー/マウスアウトがスタックされます。たとえば、ユーザーがマウスを素早く 10 回前後に動かした後、マウスの動きを止めた場合、アニメーションは 10 回繰り返します。望ましくない効果は、アニメーションがスタックしないことです。それが理にかなっているかどうか教えてください。

$(document).ready(function () {
    $('#tabFeature1').mouseover(function () {
            $('#slideout').show("slide", { direction: "left" }, 1000);
        });

    $('#tabFeature1').mouseout(function () {
            $('#slideout').hide("slide", { direction: "left" }, 1000);
    });
});
4

1 に答える 1

0

でアニメーションがまだ進行中かどうかを確認し.is(':animated')、前のアニメーションが完了している場合はアニメーションを適用します。

$(document).ready(function () {
    $('#tabFeature1').mouseover(function () {
            if (!$('#slideout').is(':animated')) {
                $('#slideout').show("slide", { direction: "left" }, 1000);
            }
        });

    $('#tabFeature1').mouseout(function () {
            if (!$('#slideout').is(':animated')) {
                $('#slideout').hide("slide", { direction: "left" }, 1000);
            }
    });
});
于 2013-02-03T16:30:18.990 に答える