1

私の.shake()効果は、複数のブラウザーにまたがるビジネスを私に与えてくれます。たとえば、Chrome ですばやくホバーすると、キューが蓄積されるという問題が発生します。シェイク効果の前に実装しようとする.stop()と、要素は下向きのシェイクを開始し、アニメーションが完了せず、要素が完全にずれてハングします。IE では、アニメーションが 2 回以上発生します (ホバリングをすばやく行ったり外したりしていなくても)。そして厄介なことに、マウスをリンクの上に置いたままにすると、アニメーションが何度も何度も起動します。

.stop() とその true/false 引数のさまざまなバリエーションをいじってみました。また、アニメーションの各ステップで queue:false を使用してみました。関数の mouseleave 部分に .shake 効果を times:0 で入れてみました (面白い結果が得られました)。次に何をしようか途方に暮れています。

私のコードは以下ですが、シェイクの問題のあるメニューへのリンクは次のとおりです。

$(document).ready(function () {
    $('.shake').hover(function () {
        $(this).animate({
            'color': '#fc0'
        }, 150).effect('shake', {
            times: 1,
            distance: 12,
            direction: 'down'
        }, 50);
    }, function () {
        $(this).animate({
            'color': '#8a600f'
        }, 500);
    });
4

1 に答える 1

1

私の最初の考えは、.stop(true,true)each の直前に追加することでし.animate()たが、あなたはそれを試したと言いました。

要素が現在アニメーション化されているかどうかをテストし、必要な場合にのみ新しいアニメーションをキューに入れることができます:

$('.shake').hover(function() {
    var $this = $(this);
    if (!$this.is(":animated")) {
       $this.animate({
            'color': '#fc0'
       },150).effect(
            'shake', {
            times:1,
            distance:12,
            direction: 'down'
       }, 50 );
    }
}, function () {
    $(this).animate({
       'color': '#8a600f'
    },500); 
});

詳細については、:animatedセレクタ docoを参照してください。

于 2012-06-05T03:28:43.163 に答える