Home/ Questions/Q 8440517
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T08:18:53+00:00

I have a little problem with jQuery. I try to show multiple texts in

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <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>

    • 0