desmeit
desmeit

Reputation: 660

FadeIn FadeOut with Loop

I want to loop the following code. I searched but I do not find a solution. Could somebody help me?

<script>


$(function(){
$('img#picture').fadeIn('slow');

setTimeout(function(){ 
  $('#test').fadeIn("slow"); 
 }, 2000 ); 

setTimeout(function(){ 
 $('#test').fadeOut("slow"); 
 }, 10000 ); 


})

</script>

Thank you very much.

Best regards

Upvotes: 0

Views: 144

Answers (2)

MonkeyZeus
MonkeyZeus

Reputation: 20757

Thanks for showing me the website, please try this:

<script>
$(function(){

    $('img#jana, img#katharina, img#kathrin').fadeIn('slow', function () {

        setTimeout(showNext, 2000);

        setInterval(showNext, 10000);

    });

    function showNext() {
        var target = $('#expertenbilder');

        if (target.find('#sprechblase_jana').is(':visible')) {
            $(this).fadeOut("slow");

            setTimeout(function () {
                target.find('#sprechblase_katharina').fadeIn("slow");
            }, 2000);
        } else if (target.find('#sprechblase_katharina').is(':visible')) {
            $(this).fadeOut("slow");

            setTimeout(function () {
                target.find('#sprechblase_kathrin').fadeIn("slow");
            }, 2000);
        } else if (target.find('#sprechblase_kathrin').is(':visible')) {
            $(this).fadeOut("slow");

            setTimeout(function () {
                target.find('#sprechblase_jana').fadeIn("slow");
            }, 2000);
        } else {
            $('#sprechblase_jana').fadeIn("slow");
        }
    }

});
</script>

Upvotes: 1

Udit Bhardwaj
Udit Bhardwaj

Reputation: 1781

use setInterval

var t=setInterval(function(){

$('img#picture').fadeIn('slow');

setTimeout(function(){ 
 $('#test').fadeIn("slow"); 
}, 2000 ); 

setTimeout(function(){ 

  $('#test').fadeOut("slow"); 
}, 10000 ); 

},3000)  //3000 is just an example, set suitable interval to allow effect to run smoothly 


window.clearInterval(t)  //to stop

Upvotes: 1

Related Questions