jQuery not and classes
- by Giles B
Hi Guys,
I have 2 anchor links (a.selector) and when one is clicked it has a class applied to it of 'active-arrow' and the click also removes the class of the same name from the other anchor as well as lowering the opacity to 0.2.
I then want to have a fade effect when the user hovers over the anchor that doesn't have 'active-arrow' applied to it so that it goes to full opacity when mouseenters and back to 0.2 when mouseleaves.
The problem im having is that both .not and :not don't seem to be working as expected, the hover effect works but if I click on the anchor whilst hovering the 'active-arrow' class is applied but when mouseleaves the opacity is faded down to 0.2 again even though the 'active-arrow' class is applied. Also the hover then doesn't work for the other a link which has had 'active-arrow' removed.
Bit of a hard one to explain so heres some code that hopefully helps a bit.
*//If a.selector doesn't have the class 'active-arrow' then run the hoverFade function*
$("a.selector").not(".active-arrow").hoverFade();
//Functions for first element
$('a.selector-1').click(function () {
$('a.selector-2').removeClass('active-arrow'); //Remove background image from corresponding element
$('ul#storage-items-2').fadeOut(1200).addClass('hide'); //Fade out then hide corresponding list
$(this).addClass('active-arrow', 'fast'); //Add background image to current element
$('ul#storage-items-1').removeClass('hide').fadeIn(1800); //Unhide and fade in the list
$('a.selector-2').fadeTo(500, 0.2); //Fade corresponding element
$(this).fadeTo(800, 1);//Fade this element to full opacity
});
I only included the code for teh first anchor (a.selector-1) as the code for the second anchor is identical but just changes the class names to a.selector-2.
Also the hoverFade function is in a seperate file so we can re-use it.
jQuery.fn.hoverFade = function() {
return this.each(function(){
$(this).hover(
function () {
$(this).fadeTo(500, 0.8);
},
function () {
$(this).fadeTo(500, 0.2);
});
});
}
Each anchor link fades in and fades out a UL as well.
Any help is most appreciated
Thanks
Giles
