Question

I’ve created DIV.cb-toggle, when the user hovers over this div, it animates to Orange, when they hover off of this div, it animates back to gray, when the user clicks this div, it animates to blue, telling the user that it’s been selected. So when it’s NOT selected, it has mouseenter mouseleave animations, but when it’s selected i want to unbind mouseenter mouseleave, I DO NOT want the hover event to work when it’s been selected, only when it’s not selected. What’s the best way to do what i’m trying to accomplish? I came up with the code below but i’m pretty sure this is a horrible way to do it and i don’t know what to do. thank you so much for any help.

my code:

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

and I’m calling this bind:

$(".cb-toggle").bind("click.myfadee", function(){
      $(".cb-toggle").mouseenter(function() {
      $(this).animate({"background":"orange", "color":"#fff;"});
   }).mouseleave(function() {
      $(this).animate({"background":"gray", "color":"#fff;"});
   });
});

I need to keep the background color animation, and i’m not using jquery UI so i cannot animate between classes.

Answer 1

You know, with a little bit of CSS, this could be achieved easily.

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');
});​

demo

this is just an example, you could extend it to do your animation. You may want this link too

With animation demo