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

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

1 голос
/ 21 сентября 2010

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

мой код: 

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

1 Ответ

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

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

демо

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

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

...