jquery - 悬停期间的颜色变化拒绝恢复

Question

我有一个div，比如说DivX，我已经为此编写了hover功能css来更改它的background-color. 此外，我添加了一个jquery动画效果来移动它的left. 现在的问题是，每当我点击时DivX，hover效果就会发生并完美地动画化，但是background-color更改期间hover拒绝返回，直到我移动cursor.

演示

重现步骤：

• 把它cursor放在上面DivX，你可以看到它background-color变了。
• 点击它。[注意：不要移动光标。]
• 现在您可以看到，DivX已经动画到它的新位置，但它background-color保持不变。
• 现在，移动mouse cursor，您可以注意到background-color变化。

我的问题是，我怎样才能Hover在没有任何中断的情况下使用我的情况下的功能。？

Answer 1

$(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/

Answer 2

这是一种解决方法，其工作方式与 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");
});