CODEWITHSUNDEEP
javascriptjquery
DaniS.
DaniS.

Reputation: 181

jQuery looping a function fails

I have a little problem with jQuery. I try to show multiple texts in a div. these divs shoud fadein and fadeout and in the end the function should restart.

i wrote a simple example and when it runs. it starts fine...

  1. one
  2. two
  3. three
  4. four
  5. five
  6. six

when the function is looped the problem beginns. it shows the following order:

  1. two
  2. four
  3. five
  4. six and starts then over with this order.

i don't get it. Can anybody point me in the right direction?

thats the script:

<html>
<head>
<script type="text/javascript" src="jquery151.js"></script>


    <script type="text/javascript">
$(document).ready(function() {
    function loop() {

    var fadeTime = 1000;
    var delayTime = 3200;       

    //if($('#layout4TextTitel').is(':visible') ) {
    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').empty().html('one');
    });
    $('#layout4TextTitel').fadeIn(1000).delay(delayTime);


    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').html('two').fadeIn(1000).delay(delayTime);
    }); 

    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').empty().html('three');
    });
    $('#layout4TextTitel').fadeIn(fadeTime).delay(delayTime);

    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').empty().html('four');
    });
    $('#layout4TextTitel').fadeIn(fadeTime).delay(delayTime);

    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').empty().html('five');
    });
    $('#layout4TextTitel').fadeIn(fadeTime).delay(delayTime);

    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').empty().html('six');
    });
    $('layout4TextTitel').fadeIn(fadeTime).delay(delayTime);                                                    
     // Ende for-Schleife       

    } // Ende loop()

    for(var x = 0; x <=1000; x++) {
        loop();
    } // Ende for-Schleife

    });

</script>
</head>
<body>
<div id="layout4TextTitel"></div>
</body>

Upvotes: 0

Views: 109

Answers (4)

peter
peter

Reputation: 185

For timing in jQuery I recommend using jquery-timing.

With that plugin your whole code gets:

var texts = ['one','two','three','four','five','six'];

function nextText(i) {
  this.html(texts[i % texts.length]);
}

$('#layout4TextTitel').hide().repeat(nextText)
  .fadeIn(1000,$).wait(3500).fadeOut(1000,$);

​ see this example on http://jsfiddle.net/creativecouple/VXgcw/

Upvotes: 0

Bergi
Bergi

Reputation: 664307

jQuery has an animation queue. You add things to it, and they will execute (animate) sometime in the future. Now, in your loop you add 6000 times fadeOut, fadeIn and delay. Although not being very elegant, it would work. Yet there is a problem in your code:

$('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').html('two').fadeIn(1000).delay(delayTime);
});

Unlike the other snippets, you here add the fadeIn and delay in the fadeOut callback - after all those 16000 other items which are already in the queue. With that, you have two consecutive fadeOuts in the queue, and only one will execute. Both callbacks will be invoked, but in your ancient version of jQuery their order is reversed (Demo; fixed now) - so it sets the html first to "three" and right after that to "two" - you won't see the "three" appear.

Upvotes: 0

DarkThanos
DarkThanos

Reputation: 122

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            function loop(x){
                var count_down = ["one","two","three","four","five","six"];
                if(x>=count_down.length)x=0;
                $('#layout4TextTitel').fadeOut(1000, function() {
                    $('#layout4TextTitel').empty().html(count_down[x]);
                });
                $('#layout4TextTitel').fadeIn(1000).delay(3200);
                setTimeout(function(){loop(x+1)},1000);
            }
            loop(0);
        });
    </script>
</head>
<body>
    <div id="layout4TextTitel"></div>
</body>

Upvotes: 1

Dan Grossman
Dan Grossman

Reputation: 52372

Your loop will execute all 1000 times in less time than it takes for a single fadeIn or fadeOut to finish. You're telling elements that are already animating to animate again.... 1000 times in less than a second.

Use setInterval to have loop() run once every X milliseconds.

Upvotes: 0

Related Questions