Search jQuery

jQuery Forum

Fade out, change text, fade in...simples?

in Getting Started • 10 years ago

Hi all - newbie to iQuery - loving it so far but having a bit of a problem that I hope someone can point me in the right direction over...

I'm using "Blinds" http://www.littlewebthings.com/projects/blinds/ to fade in and out some images in a div and it works fine. I also want another div next to the images that contains a text title linked to the image to fade out, change the text to the appropriate string and then fade back in.

I got to grips with fade in and out a div using fadeTo easily enough, but it is the fade out, change content and then fade back in that I am having trouble with.

//set up array of text items to fade from and to
var slideShowTextArray = ["Image 1 text - Big top","Image 2 text - Lady with post-its", "Image 3 text - chimp", "Image 4 text - apples!", "Image 5 text - crazy child"];
/* text area fader */
//fade out text
$('#slideshowTextContainer').fadeTo('fast', 0);
var text_index = img_index;
document.getElementById('slideshowTextContainer').innerHTML = slideShowTextArray[text_index];
//fade up slideshowTextContainer
$('#slideshowTextContainer').fadeTo('fast',1);

Everything works fine, but in the wrong order... I click the button, the Blinds code fires (I've inserted this code into the Blinds code so it all fires when clicked), then the text changes, then it fades out then in again.

Any ideas for a newbie?

cheers

frank