0

1秒間に5回以上、緑色のボックスにホバーインおよびホバーアウトしようとすると、ボックスがボールのようにバウンドしていることがわかります。私がしたいのは、緑色のボックスが元のサイズ（50px）に戻ると、ホバーインが再び有効になるということです。そのため、私がより速く実行hover-inしhover-out、アニメーションがバウンドしているように見えないようにします。
あなたが私の言いたいことを理解してくれることを願っています。
これが私のフィドルです

4

3 に答える 3

1

これは、アニメーションがキューにプッシュされるためです（すべてのアニメーションが同時に再生されるわけではありません）。非常に速く移動すると、多くのアニメーションがキューに入れられ、時系列で再生されます。これは通常の動作です。

この効果を修正したい場合は、別のアニメーションを開始するたびにアニメーションのキューを空にする必要があります。

このコードを使用すると、期待どおりの結果が得られます

$img.hover(
        function(){                
            $(this).stop(true).animate({
               height: o.contentHeight,
               width: o.contentWidth,
               left: "-=" + leftDistance,
               top: "-=" + topDistance
            }, o.speed);                
        }, 
        function(){
            $(this).stop(true).animate({
               height: o.imageInitHeight,
               width: o.imageInitWidth,
               left: "+=" + leftDistance,
               top: "+=" + topDistance
            }, o.speed);
        }            
    );

このstop(true)メソッドは、将来のアニメーションのキューをリセットします。

もちろん、これで問題全体が解決されるわけではありません。これは、位置の計算に問題が残っているためです。

この部分を確認し、アニメーションでもっと単純なものを使用してみてください

これが実際の例です：実際の例

于 2012-10-19T04:46:18.913 に答える
1

jQuery.stop()既存のコードを使用し、完全なズームイン/アウト（使用しない）の後にX時間ズームイン/アウトを無効にする場合は、このdata()メソッドを使用してDOM要素に変数を設定し、を使用setTimeout()してクリアすることができます。それ。この例では、ズームアウト後、両方のアクションが1秒間（1000ミリ秒）無効になります。

$img.hover(
    function(){
       // do not zoom in if currently disabled
       if (!$(this).data('disabled')){
            $(this).animate({
               height: o.contentHeight,
               width: o.contentWidth,
               left: "-=" + leftDistance,
               top: "-=" + topDistance
            }, o.speed);  
        }             
    }, 
    function(){
       // do not zoom out if currently disabled
         if (!$(this).data('disabled')){
            // disable zoom in/out by setting 'disabled=true'
            $(this).data('disabled', true);
            // alias this to a variable
            var $this = $(this);
            // use setTimeout to clear the variable after 1000ms
            setTimeout(function(){ $this.data('disabled', false); }, 1000);
            $(this).animate({
               height: o.imageInitHeight,
               width: o.imageInitWidth,
               left: "+=" + leftDistance,
               top: "+=" + topDistance
            }, o.speed);
        }
    }            
);
于 2012-10-19T05:02:31.223 に答える
0

このような問題を修正するには、HoverIntent（プラグイン）を利用できます。

http://cherne.net/brian/resources/jquery.hoverIntent.html

使いやすく、柔軟性があります。

于 2012-10-19T04:55:35.363 に答える