Jquery: Small bind hover/unbind snippet of code, few lines long, don't know what's wrong

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 these events, 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, it needs to fade.

Why unbind, it becomes complicated? If your click functin was to add a 'selected' class to your div, you could then change your mouse enter/leave functions to check for that class and not change the coluors if it exists. — Paddy, Sep 20 '10 at 13:44
code is correct , so think you have to update little bit more on http://jsfiddle.net/ so every one can see whats wrong — Pramendra Gupta, Sep 20 '10 at 13:48
i put up the code that had .css(etc) on accident, it's supposed to be .animate(etc), the bg color needs to animate — android.nick, Sep 20 '10 at 14:42

score 2 · Answer 1 · answered Sep 20 '10 at 13:50

I would use CSS for the styling to simplify your whole setup without un/re-binding, like this:

.cb-toggle { background: blue; color: #fff; }
.cb-toggle.active { background: gray; }
.cb-toggle.active:hover { background: orange; }

Then you can do just this:

$('.cb-toggle').click(function() {
  $(this).toggleClass("active");
});

This approach also lets you offload all styling, colors, etc to the CSS, meaning no JavaScript changes are needed when you decide to tweak the colors or any other styling :)

Or, if you need to support IE6, add a .live() handler for the hover that triggers on only the ones with the .active class, like this:

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

With matching CSS:

.cb-toggle.active.hover { background: orange; }

+1 for using live(), although you should also look at the documentation for delegate() — RMorrisey, Sep 20 '10 at 13:55
crap i posted the wrong code.. I need the background to animate between colors though.. so that wont work. code updated. — android.nick, Sep 20 '10 at 14:40
@android.nick - Are you using the color plugin or jQuery UI for the color animation? I'm out for the day shortly, but jQuery UI lets you animate classes as well. — Nick Craver, Sep 20 '10 at 15:34

score 0 · Accepted Answer · answered Sep 20 '10 at 13:51

You should probably just use a selected class. Also I'd recommend against using any of the .css() calls you have here. Just use classes.

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

i posted the wrong code that had .css() in it, it's supposed to be .animate(), how would i rework your code to fix it? grrr i'm sorry i'm so tired. — android.nick, Sep 20 '10 at 14:45

Jquery: Small bind hover/unbind snippet of code, few lines long, don't know what's wrong

my code:

and I'm calling this bind:

2 Answers2