jQuery not animating links.

Question

Hi, I am trying to get the fade effect of my image slider plugin to work correctly with links.

At the moment the slider fades correctly however the links are failing to change. The first image is supposed to link to Google.com & the second link is supposed to link to Hotmail.com however both of them are linking to Hotmail.com only (the link for the last image; this is the case no matter how many images you use).

To achieve the fade I am using .animate({opacity:0}}) & 1, etc. Here are the lines that seem to effect the animation (72, 215 & 216 respectively):

$(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);

$(this.slides).stop().animate({opacity:0}, {
        duration: this.settings.duration,
        easing:this.settings.easing
} );
$(this.slides).eq(index).stop().animate( {opacity:1}, {
        duration: this.settings.duration,
        easing:this.settings.easing
} );

Source: http://pastebin.com/9JwaM9tg

Test site: http://matthewruddy.com/demo

Thanks to anyone who can help me out. Really appreciate it.

Answer 1

You are only setting the opacity of the li so while it is not visible it is still displayed when the opacity reaches 0 you should set display: none so that the li is completely hidden this should then allow the currently visible image to link properly.

$(this.slides).css({'opacity':0, 'display':'none'}).eq(this.currentNo).css({'opacity':1, 'display':'block'});

$(this.slides).stop().animate({opacity:0}, {
    duration: this.settings.duration,
    easing:this.settings.easing,
    complete:function(){
        $(this).css({'display':'none'});
    }
});

$(this.slides).eq(index).stop().css('display','block').animate( {opacity:1}, {
    duration: this.settings.duration,
    easing:this.settings.easing
});