A jQuery Query!

JavaScript
1

Hi there, nice to be the newest member here :slight_smile:

I’ve got a jQuery question I’d like some help with. I’m trying to get a testimonial to fade out so another one can be selected and take it’s place.

function scroller() {
    //other stuff to do with scroller
        $('#scrollText').stop(false, false).animate({top: '-100px'}, 
                (3000), function() {
                    /* Animation complete. */ });
        $('#scrollText').fadeOut(500, function() { /* Animation complete. */ });
        //code to replace testimonial text, and reset top to 0px
        $('#scrollText').fadeIn(500, function() { /* Animation complete. */ });
}

I thought these would all run nicely after each other… but that’s not the case.

I’ve tried various things with the ‘Animation complete’ sections, and even tried splitting everything up using “setTimeout(replaceTestimonial(), 3000);” etc, but nothing seems to run like I imagined.

Can you please point out where I’m going wrong, or even give a link resolving a similar problem?

Thanks.

2

Can anyone help me with this?

…or does this question belong on a different forum since it’s jQuery?

I’m really just looking for a smooth, timed transition between the objects

3

Hi there,
If you could you post a link to a page where I can see the problem you describe, I wouldn’t mind taking a look.

4

Hey Zara4,

You’re on the right track here, what you’re going to want to do is make sure things execute in the right sequence.

At the moment the animate and fade functions are called subsequently, without waiting for the others to finish. So what we need to do is put them in the callback functions so they cascade, and then call scroller() again at the end (creating a loop of the effect).


function scroller() {
    //other stuff to do with scroller
    $('#scrollText').animate({top: '-100px'}, 3000, function() {
        //after moving the item up, fade it out
        $('#scrollText').fadeOut(500, function() { 
            //code to replace testimonial text, and reset top to 0px
            //now that we've replaced the content, fade it in again
            $('#scrollText').fadeIn(500, function() { 
                //finally call scroller again to make sure we have a loop
                scroller(); 
            });


        });


    });

}