Jquery text animation delay function not working

Question

I have this following jquery text fly-in animation.Here is my code before I explain further:

<script type="text/javascript">

$(document).ready(function(){

    $('.flying1 .flying-text').css({opacity:0});
    $('.flying1 .active-text').animate({opacity:1, marginLeft: "0px"}, 1200); //animate first text
    var int = setInterval(changeText, 3500);    // call changeText function every 5 seconds

function changeText(){  
    var $activeText = $(".flying1 .active-text");     //get current text    
    var $nextText = $activeText.next();  //get next text

    if ($activeText.is('.end')) {
        $activeText.stop().delay(5000);
        $('.flying1').html('<div class="flying-text active-text">Text4<div>
                                <div class="flying-text">Text5</div>
                                <div class="flying-text end2">Text6</div>');
        $('.flying1 .flying-text').css({opacity:0});
        $('.flying1 .active-text').animate({opacity:1, marginLeft: "0px"}, 1200); //animate first text
    };

    if ($activeText.is('.end2')) {
        $activeText.stop().delay(5000);
        $('.flying1').html('<div class="flying-text active-text">Text1<div>
                                <div class="flying-text">Text2</div>
                                <div class="flying-text end">Text3</div>');
        $('.flying1 .flying-text').css({opacity:0});
        $('.flying1 .active-text').animate({opacity:1, marginLeft: "0px"}, 1200); //animate first text
    };

    $nextText.css({opacity: 0}).addClass('active-text').animate({opacity:1, marginLeft: "0px"}, 1200, function(){

        $activeText.removeClass('active-text');                                           
    });
}
});
</script>

HTML

<div class="flying-text active-text">Text1<div>
<div class="flying-text">Text2</div>
<div class="flying-text end">Text3</div>

Now as you can see, Text1-3 animates/flies in first, then when Text3 is reached, they are replaced by Text4-6 in the animation, when Text6 is reached again, it loops back to Text1-3 again...Now basically what I want to do is pause/delay the animation for longer when it reaches the end of the Text, that is at Text3(class="flying-text end") and Text6(class="flying-text end2". So I want Text3 and Text6 to animate longer than all the others. how do I do that? The code I used :

$activeText.stop().delay(5000);

does not work...

Thank You

Your quotes are incorrectly nested. Can you create an example on http://jsfiddle.net ? — Marcel Korpel, Jun 22 '12 at 13:24
is Text3 supposed to remain on screen until the start of the next cycle? — Alnitak, Jun 26 '12 at 13:42
FYI, jQuery will have a new animation engine: http://blog.jquery.com/2012/06/22/jquery-1-8-beta-1-see-whats-coming-and-going/ — biziclop, Jun 26 '12 at 14:23
@Alnitak, yes, it is.TExt3 should stay longer than Text 1 and 2, before fading out and introduce Text4-6 — Dexter Schneider, Jul 03 '12 at 12:07
@DexterSchneider old comment - I already answered the question and got the bounty ;-) — Alnitak, Jul 03 '12 at 12:11

Alnitak · Accepted Answer · 2012-06-26T14:21:33.127

3

I think you've made things over-complicated for yourself.

You just need to use normal setTimeout to trigger the next animation, but do that within the animation "complete" function to ensure that you're not mixing animation timers with normal timers.

You should also avoid setInterval for the same reason - it'll fall out of sync with any animation timers, particularly when the jQuery authors revert back to using requestAnimationFrame.

Here's my solution:

var text = [
    ['Text1', 'Text2', 'Text3'],
    ['Text4', 'Text5', 'Text6']
    ];

var n = 0,
    page = 0;
var $f = $('.flying-text');

function changeText() {
    $f.eq(n).text(text[page][n]).css({
        opacity: 0,
        marginLeft: '-50px'
    }).animate({
        opacity: 1,
        marginLeft: "0px"
    }, 1200, function() {
        if (++n === 3) {
            page = 1 - page;
            n = 0;
            setTimeout(function() {
                $f.empty();
                changeText();
            }, 6000);
        } else {
            setTimeout(changeText, 2000);
        }
    });
};

changeText();

working demo at http://jsfiddle.net/alnitak/GE2gN/

Note that this completely separates the text content from the animation logic.

edited Jun 26 '12 at 14:21

answered Jun 26 '12 at 13:57

Alnitak

313,276
69
379
466

That looks good to me, hopefully Dexter will agree. I spent ages fiddling with timeouts and intervals and just couldnt get it any further than above. – Gaz Winter Jun 26 '12 at 14:14
Awesome. It is exactly what I need. Really appreciate your help and effort. Problem is, I tried implementing it on my webpage, but it does not work. I used it as is, everything is duplicated as is, but no text appears. I use a few other preloader scripts and some other jquery functions as well, so I don't know if they are clashing. Any suggestions? – Dexter Schneider Jun 27 '12 at 12:46
@DexterSchneider that's tricky - is your page public anywhere? – Alnitak Jun 27 '12 at 12:49
yes, but I've changed the code on the main div in question back to what it was(before the suggested change above)...you can see it here...I'm constantly changing stuff on it, but the basic functionality and lay-out remains: http://v4m.mobi/index.php/en/?option=com_content&view=article&catid=2&id=140 – Dexter Schneider Jun 27 '12 at 15:03
@DexterSchneider well, we know my code works when it's standalone. Did it produce any console errors when you put it in your own page? Also, don't forget that this version requires that the flying divs exist, but they don't need any content - the script adds that on the fly. – Alnitak Jun 27 '12 at 15:10
yes I understand it so...How do I check for console errors? But this is a common thing for me, examples working in jsfiddle does not always work on my Joomla powered page(i hate joomla but I have no choice, i have to use it...).But thank you for your answer, as you said, it works, and I will play with it until I get it to work. your code is really good. – Dexter Schneider Jun 28 '12 at 08:56

score 1 · Answer 2 · edited May 23 '17 at 11:56

1

There is a similar question here:

delay JQuery effects

In the comments of the second answer down it states that delay doesnt work with stop.

Hope this page is useful to you.

EDIT OK i have found a solution. Try this and let me know if its suitable.

Replace your delay lines with this:

  $(this).animate('pause').delay(5000).animate('resume');

edited May 23 '17 at 11:56

Community

1
1

answered Jun 22 '12 at 13:26

Gaz Winter

2,781
2
22
45

Hi. I tried that function on different elements and on different implementations but the main function/animation still overwrites it. Any hints? Would really appreciate it. I really did try – Dexter Schneider Jun 25 '12 at 10:13
Can you make a working example on jsfiddle.net? Then i can have a look at it better. – Gaz Winter Jun 25 '12 at 10:25
Hi. Here is a working example. http://jsfiddle.net/pB8zp/8/ What I basically want to do is pause the last text elements a little longer before fading out(that is text 3 and text6). Thank You! – Dexter Schneider Jun 25 '12 at 17:30
I have got it working. Please see my edit above. Also please see http://jsfiddle.net/pB8zp/16/ – Gaz Winter Jun 25 '12 at 19:01
thanks, but from the look of it it does not work. It seems to apply it only the first time Text3 is shown, then it ignores it. I changed the delay to 8000 and it does not delay for that long at all...any suggestions on that? Thank you for your help, appreciated – Dexter Schneider Jun 26 '12 at 07:54
Hmm. OK i will take another look when im on lunch. – Gaz Winter Jun 26 '12 at 08:08
I spent a good hour trying to get it working as well. It must be something to do with how its being called initially. – Gaz Winter Jun 26 '12 at 13:35
I have added a bounty to the question so hopefully more people will try and help. – Gaz Winter Jun 26 '12 at 13:40
Thank you Gaz. Really appreciate your help and effort, you went an extra mile. – Dexter Schneider Jun 27 '12 at 11:15
No problem. Hope the above solution helps :) – Gaz Winter Jun 27 '12 at 11:19

score 1 · Answer 3 · answered Jun 28 '12 at 07:28

Queue your animations, and use .delay() on, a common queue object (demo):

var text = [
        [ 'Text1', 'Text2', 'Text3' ],
        [ 'Text4', 'Text5', 'Text6' ]
    ],
    reset = {
        opacity: 0,
        marginLeft: -50
    },
    flyout = {
        opacity: 1,
        marginLeft: 0
    },
    flyoutDuration = 1200,
    changeTextDelay = 5000,
    q = $({}), // can also be a common element, e.g. $('.flying1')
    pos = 0;

function changeText() {
    $('.flying1 .flying-text').each(function(i) {
        var div = $(this);

        // setup text
        div.css(reset).text(text[pos][i]);

        // queue
        q.queue(function(next) {
            div.animate(flyout, flyoutDuration, next);
        });
    });

    q.delay(changeTextDelay).queue(function(next) {
        pos = (pos + 1) % text.length;
        changeText();
        next();
    });
}

changeText();

does this actually provider a delay between each individual text slideout? It doesn't look like it does — Alnitak, Jun 28 '12 at 13:33
@Alnitak Your question only asked for a delay after "Text3" and "Text6". Here is a version with delays after each slideout: http://jsfiddle.net/jefferyto/pB8zp/73/ — Jeffery To, Jun 28 '12 at 14:50
actually it wasn't my question, but the original question wanted _extra_ delay after each third item - it had 3.5 seconds between the start of each 1.2s animation. — Alnitak, Jun 28 '12 at 19:46

Jquery text animation delay function not working

3 Answers3