Jquery - привязать/отвязать скрипт наведения, небольшой кусок кода, не знаю, что делать

Я создал 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, поэтому я не могу анимировать между классами.


javascript toggle jquery bind unbind
person android.nick    schedule 21.09.2010    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы знаете, с небольшим количеством 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');
});​

демонстрация

это всего лишь пример, вы можете расширить его, чтобы сделать свою анимацию. Вам также может понадобиться эта ссылка.

С демонстрацией анимации

person Reigel    schedule 21.09.2010
comment
Вау, чувак, ты только что сделал все возможное. И jsfiddle действительно крут. - person Unoti; 21.09.2010