javascript - jQuery奇数ホバーイベント

Question

これが私の現在のコードです、http：//jsfiddle.net/AW5BK/2/

 $(".feedback").hover(function(){
   $(this).animate({marginLeft : "25px"},500);
  },function(){
    $(this).animate({marginLeft : "-25px"},500);
 });

それはうまく機能しますが、オブジェクトをすばやく動かしたり外したりするたびに、スライドして開閉を繰り返します。それが起こらないようにする方法はありますか？ありがとうございました

Answer 1

stop（）を使用して、アニメーションの繰り返しの競合を防ぎます。

$(".feedback").hover(function(){
    $(this).stop().animate({marginLeft : "25px"},500);
},function(){
    $(this).stop().animate({marginLeft : "-25px"},500);
});

これがjsFiddleの動作です。

Answer 2

ネイティブメソッドを使用することをお勧めします。

$(".feedback").hover(function(e){
  e.stopPropagation();
  $(this).animate({marginLeft : "25px"},500);
},function(){
  e.stopPropagation(e);
  $(this).animate({marginLeft : "-25px"},500);
});

またはさらに良い– CSSトランジション：

.feedback {
  transition: all 600ms ease-in-out;
}

.feedback:hover {
  transform: translate3d(-25px, 0, 0);
}

両方のプロパティにはプレフィックスが必要です：-webkit-、-moz-、-o-およびなしの1つ