CODEWITHSUNDEEP
jqueryslider
user2501504
user2501504

Reputation: 311

setTimeOut , detect end function and activate

With this little function i can move sliders easy and i can insert the time for setTimeOut send the new loop , etc

But i have one problem , you can see the var time , this var indicate the time for run other time setTimeOut and if you see in the animation i have other times for run and show in each slider , the problem it´s i need the time for run setTimeOut start when the animation finish and create the interval of time betwen animations , with this times when run the first slider show the second , etc and i cant show one to one each slider

For example run the first slider and after 8 seconds show the next , etc 

var time = 8000;

$(".im_" + id).slideDown().animate({
    height: "300px",
    width: "100%",
}, 1200).delay(4000).fadeOut(1000);

id = (id + 1) % imax;
setTimeout(function() {
    slider(id);
}, time);

I hope understand all , thank´s , the best regards

Upvotes: 0

Views: 1060

Answers (4)

jbl
jbl

Reputation: 15413

You may go for promise().done see (updated) jsfiddle on divs

var time = 8000;
var imax = 4

function slide(id, firstPass) {
    firstPass &= id !== imax;
    id = id % imax;
    var nextId = (id + 1);
    $(".im_" + id).slideDown().animate({
        height: "300px",
        width: "100%",
    }, 1200).delay(4000).fadeOut(1000);
    if (firstPass) 
        $(".im_" + id).promise().done(function () {
          setTimeout(function () {
              slide(nextId, firstPass);
          }, time)
    });
}


slide(0, true);

Upvotes: 0

megawac
megawac

Reputation: 11353

As I mentioned in my comment, you can run the next slider by just waiting for the complete event from the last animation. For your example the second slide(id) will be run 8 seconds after the first animation completes.

var time = 8000;

function nextAnimation() {
    setTimeout(function() {
        id = (id + 1) % imax;
        slider(id);
    }, time);
}

$(".im_" + id).slideDown().animate({
    height: "300px",
    width: "100%",
}, 1200).delay(4000).fadeOut(1000, nextAnimation);

Upvotes: 0

RichieAHB
RichieAHB

Reputation: 2088

You could always set the the other times as variables such as var delayTime = 4000 and then add them all together to get the real time you would like to wait so:

timeOutDuration = additionalTime + delayTime + animationTime + fadeOutTime

Where additionalTime is your 8 seconds, and use timeOutDuration as opposed to time as the duration for your setTimeout

By the sound of it a callback would be your best bet but I don't totally understand what it is you're trying to do.

Upvotes: 1

Azeirah
Azeirah

Reputation: 6338

The jquery slidedown function and the animate function both have callbacks. Wouldn't it work to rewrite

id = (id + 1) % imax;
setTimeout(function() {
    slider(id);
}, time);

as 

function slide() {
    id = (id + 1) % imax;
    slider(id);
}

And then just calling that function as the callback of animate?

If you're unaware of what a callback is

Upvotes: 0

Related Questions