Jquery: Небольшой фрагмент кода при наведении / снятии привязки, несколько строк, не знаю, что не так - PullRequest
Новая
       5

Jquery: Небольшой фрагмент кода при наведении / снятии привязки, несколько строк, не знаю, что не так

4 голосов
/ 20 сентября 2010

Я создал DIV.cb-toggle, когда пользователь наводит курсор на этот div, он анимируется в Orange, когда он зависает над этим div, он снова становится серым, когда пользователь нажимает этот div, он анимируется в синий, сообщая пользователю, что он выбран. Поэтому, когда он НЕ выбран, у него есть анимация мышиного входа, но когда он выбран, я хочу отменить привязку этих событий, Я НЕ хочу, чтобы событие зависания работало, когда оно выбрано, только когда оно не выбрано. Какой лучший способ сделать то, что я пытаюсь сделать? Я пришел с кодом ниже, но я уверен, что это ужасный способ сделать это, и я не знаю, что делать. Большое спасибо за любую помощь.

мой код: 

$('.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;"});
   });
});

Мне нужно сохранить анимацию цвета фона, она должна исчезнуть.

Ответы [ 2 ]

2 голосов
/ 20 сентября 2010

Я бы использовал 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() для hover, который запускается только для тех с классом .active, например: 

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

С соответствующим CSS: 

.cb-toggle.active.hover { background: orange; }
0 голосов
/ 20 сентября 2010

Вы, вероятно, должны просто использовать выбранный класс.Также я бы рекомендовал не использовать любые вызовы .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;"});
  }
});
...