3

私は を持っておりdiv、それを変更するための機能をDivX書いていました。さらに、アニメーション効果を追加して、その. 今の問題は、私がクリックするたびに、効果が発生し、その上で完全にアニメーション化されますが、.hovercssbackground-colorjqueryleftDivXhoverbackground-colorhovercursor

デモ

再現する手順：

  • cursorの上に を配置すると、変化DivXすることがわかりますbackground-color。
  • それをクリックしてください。[注: カーソルを動かさないでください。]
  • DivXこれで、 が新しい場所にアニメーション化されていることがわかりますがbackground-color、同じままです。
  • では、 を動かすとmouse cursor、変化に気付くことができますbackground-color。

私の質問は、Hover私の場合、中断することなく機能を利用するにはどうすればよいですか?

4

2 に答える 2

0

これは一種の回避策であり、Yusaf の回答と同様の方法で機能します。ホバーしたときに背景をオレンジ色に保つクラスを設定し、「アニメーション完了」コールバックを使用してそのクラスを削除します。そのクラスが削除されたら、もう一度カーソルを合わせると、目的の結果が得られます。

CSS:

#test.fix:hover, #test.fix{
    background-color:orange;
}

JS:

$("#test").click(function(){ 
   $(this).animate({ "left": "200"}, 500, function(){ $(this).removeClass("fix");
   }).addClass("fix");
});
于 2013-01-14T17:58:00.663 に答える
0 
$(document).ready(function(){
  var count = 0;
  $("#test").click(function(){
    $(this).animate({ "left": "200"}, 500 );
    if(!count){
      count++;
    $(this).css({'background-color':'orange'});
    }
  });  
  $("#test").hover(function(){
    $(this).css({'background-color':'yellow'});
  }, function(){
  $(this).css({'background-color':'orange'});
  });

});

http://jsfiddle.net/mN7L8/7/

于 2013-01-14T16:42:28.030 に答える