1

我创建了 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，所以我无法在类之间制作动画。

4

1 回答 1

2

你知道，通过一点 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');
});​

演示

这只是一个例子，你可以扩展它来做你的动画。你可能也想要这个链接

带动画演示

于 2010-09-21T02:18:44.367 回答