Jquery - 绑定/取消绑定悬停脚本，一小段代码，不知道该怎么做

Question

我创建了 DIV.cb-toggle，当用户将鼠标悬停在该 div 上时，它会动画为橙色，当用户将鼠标悬停在该 div 上时，它会动画回灰色，当用户单击该 div 时，它会动画为蓝色，告诉已选择的用户。所以当它没有被选中时，它有 mouseenter mouseleave 动画，但是当它被选中时，我想取消绑定 mouseenter mouseleave ，我不希望悬停事件在被选中时起作用，只有当它未被选中时才起作用。完成我想要完成的任务的最佳方法是什么？我想出了下面的代码，但我很确定这是一种可怕的方法，而且我不知道该怎么做。非常感谢您的帮助。

我的代码：

$('.cb-toggle').toggle(function() { 
      $(this).animate({"background":"blue", "color":"#fff;"});      
      $(".cb-toggle").unbind("click.myfadee");
   }, function() {
      $(this).animate({"background":"gray", "color":"#fff;"});
      $('.cb-toggle').trigger('mouseenter');
   });
});

我调用这个绑定：

$(".cb-toggle").bind("click.myfadee", function(){
      $(".cb-toggle").mouseenter(function() {
      $(this).animate({"background":"orange", "color":"#fff;"});
   }).mouseleave(function() {
      $(this).animate({"background":"gray", "color":"#fff;"});
   });
});

我需要保留背景颜色动画，并且我没有使用jquery UI，所以我无法在类之间设置动画。

Answer 1

您知道，只要使用一点 CSS，就可以轻松实现这一点。

CSS

.cb-toggle {
    background-color: gray;
    color: #fff;
}
.cb-toggle:hover {
    background-color: orange;
}
.cb-toggle.selected {
    background-color: blue;
}

HTML

<a href="#" class="cb-toggle">Toggle This</a>​

jQuery

$('.cb-toggle').click(function() {
   $(this).toggleClass('selected');
});​

demo

这只是一个示例，您可以扩展它来完成您的动画。您可能也需要这个链接

带动画演示