views:

601

answers:

3

How do I fade .addClass in and out.

Here is the link -

www.aus-media.com/dev/site_BYJ/new-students/

and here is the code -

$(document).ready(function() {
  $('#menu li#Q_01,#menu li#Q_03,#menu li#Q_05,#menu li#Q_07,#menu li#Q_09,#menu li#Q_11,#menu li#Q_13').hover(function() {
    $(this).addClass('pretty-hover');
  }, function() {
    $(this).removeClass('pretty-hover');
  });
});

$(document).ready(function() {
  $('#menu li#Q_02,#menu li#Q_04,#menu li#Q_06,#menu li#Q_08,#menu li#Q_10,#menu li#Q_12').hover(function() {
    $(this).addClass('pretty-hover_01');
  }, function() {
    $(this).removeClass('pretty-hover_01');
  });
});

Thanks

A: 

If you want to fade the colours of an element, you'll need to use jQuery UI which has more advanced support for fading and animating (the core jQuery can only fade/animate integer properties: colours don't work).

It even supports animating all the properties in an entire CSS class, so using jQuery UI, you should be able to achieve the effect you want.

Dean Harding
Thanks guys I will give the UI a go. The download package looks good!
Nik
A: 

the jQuery .animate function is the best bet, although this won't let you animate between CSS classes - you have to specify the individual styles.

You would be better using the jQquery UI, as this would provide for this sort of functionality, as stated in the jQuery animate page:

The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes

James Wiseman
+1  A: 

If jQuery UI is an option, you can use .toggleClass(class, duration) for this.

Also, you can probably simplify your selector, it looks like :even and :odd will do the job based on your current selector, like this:

$(function() {
  $('#menu li:even').hover(function() {
    $(this).toggleClass('pretty-hover', 500);
  });
  $('#menu li:odd').hover(function() {
    $(this).toggleClass('pretty-hover_01', 500);
  });
});

I realize the above seems backwards, but :even does select the first element, because it's 0 based, so even selects 0th, 2nd, 4th, etc. I hope you'll agree, makes it a bit easier to maintain :)

Edit based on comments - Since .toggleclass() sticks on quick hovers, here's an alternative that works as expected, just a bit longer:

$('#menu li.post:even').hover(function() {
  $(this).stop().animate({ backgroundColor: '#009FDD', color: '#FFF' }, 500);
}, function() {
  $(this).stop().animate({ backgroundColor: '#FFFFFF', color: '#666' }, 500);  
});
$('#menu li.post:odd').hover(function() {
  $(this).stop().animate({ backgroundColor: '#623A10', color: '#FFF' }, 500);
}, function() {
  $(this).stop().animate({ backgroundColor: '#FFFFFF', color: '#666' }, 500);  
});
Nick Craver
Thanks Nick! Yes odd and even will clean up my code a lot.
Nik
I have implemented the code on a new page and it works well. I just have one problem.When I hover over the list items quickly the fades dont complete and seem to get a bit stuck. Any ideas?
Nik
sorry the link ishttp://www.aus-media.com/dev/site_BYJ/about-bikram-yoga/postures-benefits.html
Nik
@Nik - Not sure why toggleClass sticks like that, seems you're not the only one seeing this behavior though. I updated the answer with an `.animate()` alternative that works as you'd expect, not too bad since you're only animating a few properties.
Nick Craver
Mr Craver your a legend! When I can, I will surely score your advice. Thanks again!
Nik