4

我创建了 DIV.cb-toggle，当用户将鼠标悬停在此 div 上时，它动画为橙色，当他们悬停在此 div 上时，它动画回灰色，当用户单击此 div 时，它动画为蓝色，告诉被选中的用户。所以当它没有被选中时，它有 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;"});
   });
});

我需要保留背景颜色动画，它需要褪色。

4

2 回答 2

2

我会使用 CSS 作为样式来简化您的整个设置，而无需取消/重新绑定，如下所示：

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

然后你可以这样做：

$('.cb-toggle').click(function() {
  $(this).toggleClass("active");
});

这种方法还允许您将所有样式、颜色等卸载到 CSS，这意味着当您决定调整颜色或任何其他样式时不需要更改 JavaScript :)

或者，如果您需要支持 IE6，请为悬停添加一个处理程序，该处理程序仅在具有该类.live()的悬停上触发，如下所示：.active

$(".cb-toggle.active").live('mouseenter', function() {
  $(this).addClass('hover');
}).live('mouseleave', function() {
  $(this).removeClass('hover');
});

使用匹配的 CSS：

.cb-toggle.active.hover { background: orange; }
于 2010-09-20T13:50:58.873 回答
0

您可能应该只使用选定的类。此外，我建议不要使用您在此处使用的任何 .css() 调用。只需使用类。

$(".cb-toggle").bind("click.myfadee", function(){
  $(this).toggleClass('selected');
});

$('.cb-toggle').toggle(function() {
  var $this = $(this);
  if ( $this.is('.selected') ) {
    $this.css({"background":"blue", "color":"#fff;"});      
  }
}, function() {
  var $this = $(this);
  if ( $this.is('.selected') ) {
    $this.css({"background":"gray", "color":"#fff;"});
  }
});
于 2010-09-20T13:51:53.030 回答