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
– Paddy, Commented Sep 20, 2010 at 13:44
code is correct , so think you have to update little bit more on jsfiddle.net so every one can see whats wrong — Pramendra Gupta
– Pramendra Gupta, Commented Sep 20, 2010 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
– android.nick, Commented Sep 20, 2010 at 14:42

Nick Craver · Accepted Answer · 2010-09-20 13:50:58Z

2

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; }

answered Sep 20, 2010 at 13:50

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

3 Comments

RMorrisey Over a year ago

+1 for using live(), although you should also look at the documentation for delegate()

android.nick Over a year ago

crap i posted the wrong code.. I need the background to animate between colors though.. so that wont work. code updated.

Nick Craver Over a year ago

@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.

BBonifield · Accepted Answer · 2010-09-20 13:51:53Z

0

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

answered Sep 20, 2010 at 13:51

BBonifield

5,01321 silver badges36 bronze badges

1 Comment

android.nick Over a year ago

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.

Collectives™ on Stack Overflow

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 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

my code:

and I'm calling this bind:

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related