jQuery add delay

Question

Hi I want to add delay in jquery. I was trying to put $('.fade_test').delay(5000); It is working but div last three is no next to start one.

Link to a jsfiddle

HTML

<div class="fadein">
<div class="fade_test">one <button id="toggler" class="playin">Pause</button></div>
<div class="fade_test">two <button id="toggler" class="playin">Pause</button></div>
<div class="fade_test">three <button id="toggler" class="playin">Pause</button></div>
</div>

CSS

.fadein { position:relative; height:332px; width:500px; }
.fadein .fade_test { position:absolute; left:0; top:0; }

JS

var pauseplay;    

function startFader() {


    $x = $(".fade_test:visible").fadeOut(1000);
    $next = $x.next();
    if ($next.length == 0)
        $next = $(".fade_test:first-child");

    $next.fadeIn(1000);
    $('.fade_test').delay(5000);
}

function stopFader(){
    window.clearInterval(pauseplay);
console.log("stop");
}

   $('.fadein .fade_test:gt(0)').hide();

  pauseplay= window.setInterval(startFader, 2000);


var $button = $('.fadein #toggler');
$button.toggle(function() {
stopFader();  
$(this).toggleClass('playin pausin');
 $(this).text("Play");   
}, function() {

$(this).toggleClass('pausin playin');
 $(this).text("Pause");   
    pauseplay= window.setInterval(startFader, 2000);

});

Any help would be most appreciated

score 0 · Accepted Answer · edited May 23 '17 at 11:43

0

Not JQuery but you could use Javascript's very simple setTimeout(fn,milliseconds);

here is another post explaining

function foo(){
   alert('foo');
}

setTimeout(foo,1000);

edited May 23 '17 at 11:43

Community

1
1

answered Nov 15 '12 at 15:18

adam

2,930
7
54
89

Thanks Adam setTimeout(function () { ? }, 10000); how can put variable onto the function for fade_test? – user692669 Nov 15 '12 at 16:00
Sorry, but I'm not sure what it is you are trying to do. You might want to clarify the purpose of everything in your original question. – adam Nov 15 '12 at 16:52
setTimeout(function(){$('.fade_test');}, 10000); It is working! Briliant! Thanks Adam. – user692669 Nov 16 '12 at 14:44
Just found other problem. When click to internet browser tab open but came back to page, problem the timeout. – user692669 Nov 16 '12 at 14:55
use jquery blind window blur - $(window).bind('blur', function() { }); – user692669 Nov 20 '12 at 14:06

jQuery add delay

1 Answers1