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