jQueryアニメーション：一度マウスを外してアニメーションを停止する

Question

私はdivをスライドさせてホバーすると、マウスがそれぞれ入り、離れるようにしようとしています。しかし、私が何度も出入りしたとき、divは基本的にホバーをやり遂げた回数に前後していた。これはjsFiddle exampleを参照してください。

あなたはおそらく推測したように、何度何回マウスを重ねていても、マウスが要素の外に出ると、divを停止させる（つまり滑らせる）ことを望んでいます。私は、jQueryアニメーションについての理解に欠けているものがあると思います。

$("#state-slider").hover(function() { 
    $(this).animate({ 
    left: '0' 
    }, 500); 
}, function() { 
    $(this).animate({ left: "-270" }, 500); 
}); 

ありがとうございます。

Answer 1

jQuery .stop() functionが必要です。新しいアニメーションを開始する前に、コマンドチェーンに挿入して、進行中のアニメーションを中断します。

$('#state-slider').hover(function() { 
    $(this).stop().animate({ left: 0 }, 500); 
}, function() { 
    $(this).stop().animate({ left: -270 }, 500); 
}); 

Working jsFiddle =)

Answer 2

$("#state-slider").hover(function() { 
    $(this).animate({ 
    left: '0' 
    }, 500); 
}, function() { 
    $(this).stop(true,true).animate({ left: "-270" }, 500); 
}); 

DEMO

http://api.jquery.com/stop/

Answer 3

例

http://jsfiddle.net/amkrtchyan/TQz5U/1/

があります

とjquery code

$(function() { 
    $("#state-slider").hover(function() { 
     $(this).stop(true,true).animate({ 
      left: '0' 
     }, 500); 
    }, function() { 
     $(this).stop(true,true).animate({ left: "-270" }, 500); 
    }); 
});