Question

Here is my current position with a Jquery Banner – http://jsfiddle.net/WcXBs/2/

Apologies for the poor use of jquery (not knowing shortcuts etc).

I have played around with getting Jquery transitions to create fades between the banners upon change… but they are faulty (I think this is due to the code removing the class whilst adding a class meaning that it has nothing to fade from).

I also did manage to have the boxes to expand with animate, but did find that after the first time, the animations didn’t show again.

Looking at the code I have already, could anybody be able to offer guidance in order to achieve a fade animation between the banners as they change, and a successful hight animation up and then back to original?

Thanks,

Luke

Answer 1

your way is too complicated, i did your banner with very easy way, check it out: DEMO

$('a').hover(function(){

   var swap = $(this).attr('href'); // takes the hovered object's href. example = '#one'

   $('.banners').stop().hide(); // hides all banners
   $(swap).stop().fadeIn(600); // brings the hovered object with it's id

   $('a').removeClass('selected'); // removes selected class
   $(this).addClass('selected'); //adds selected class to the hovered object
});