Jquery - bind/unbind hover script, small bit of code, not sure what to do

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.

Reigel Gallarde · Accepted Answer · 2010-09-21 02:35:09Z

2

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

edited Sep 21, 2010 at 2:35

answered Sep 21, 2010 at 2:18

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Unoti Over a year ago

Wow, dude, you just went above and beyond. And jsfiddle truly rocks.

Collectives™ on Stack Overflow

Jquery - bind/unbind hover script, small bit of code, not sure what to do

1 Answer 1

demo

With animation demo

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related