CODEWITHSUNDEEP
javascriptjqueryhtmlcss
edgarmtze
edgarmtze

Reputation: 25038

use same function for several divs depending on id

I have a function that works for some divs, every 2 seconds, inside of it I want to wait 1 second to call same method but giving other div, and effect, the issue is how can I wait that second (currently every 2 seconds all divs execute the effect, and I would like to execute in a 1 second row). 

$(function () {
    index = 0;
    window.setInterval(function () {
        if (index > 10){ 
            index = 0;
        }    
        myFunction("so1", "flipping-right");
        //setTimeout(funcx, 1000);
        myFunction("so2", "flipping-left");        
        //setTimeout(funcx, 1000);
        myFunction("so3", "flipping-top");
        //setTimeout(funcx, 1000);
        myFunction("so4", "flipping-bottom");
        //setTimeout(funcx, 1000);
        myFunction("so5", "flipping-right");

        i++;
    }, 2000); 
});




myFunction = function (id, effect ) { 
    $('#' + id).toggleClass(effect);
}

Please take a look at my code

Upvotes: 2

Views: 80

Answers (4)

Ryan B
Ryan B

Reputation: 166

If you wanted a little more control out of the timing sequence you can just pass the delay between elements to the function. This way you can tweak the timing between the iterations of the set. 

myFunction = function ($flip, delay) { 
    setTimeout(function(){
        var effect = "flipping-" + $flip.attr('data-direction');
        $flip.toggleClass(effect);
    },delay);
} 

$(function () {
    var timer = 0;
    $("[data-direction]").each(function(){
        myFunction($(this),timer);
        timer += 1000;
    });
});

Upvotes: 1

Torrent Lee
Torrent Lee

Reputation: 845

$(function () {
index = 0;
var datas = [
["so1", "flipping-right"],
["so2", "flipping-left"],
["so3", "flipping-top"],
["so4", "flipping-bottom"],
["so5", "flipping-right"]
];
// 2sec to start animate
setTimeout(function  () {
    // 1sec loop
    window.setInterval(function () {
        if (index > 10){ 
            index = 0;
        }    
        myFunction( data[i][0], data[i][1]);
        i++;
    }, 1000); 
},2000)
});

myFunction = function (id, effect ) { 
  $('#' + id).toggleClass(effect);
}

may look like this

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191729

I'm not sure if you want to loop the animating, but either way, you should use setTimeout instead and call each element in a chain:

myFunction = function (id, effect ) { 
    var $elem = $('#' + id);

    if ($elem.length) {
        setTimeout(function () {
            $elem.toggle(effect);
            myFunction(nextID, nextFlippint);
        }, 2000);
    }
}

What I would suggest is to store the effect on the element itself as in data-effect="flipping-right" because there does not seem to be any other sort of calculable order. As for nextID, you can either use the .next() element instead, or you can add 1 to the current id. If you want this to loop over, then reset the id to 1 if $elem.length is zero.

Upvotes: 1

Benjamin Gruenbaum
Benjamin Gruenbaum

Reputation: 276286

You almost got it right, the problem is you have function invocation and you need to pass the function itself. setTimeout accepts a function parameter so you need to pass a function to it .

Try (inside the setInterval)

setTimeout(function(){
    myFunction("so1", "flipping-right");
    myFunction("so2", "flipping-left");        
    myFunction("so3", "flipping-top");
    myFunction("so4", "flipping-bottom");
    myFunction("so5", "flipping-right");
}, 1000);

If you'd like to execute them one after the other you can do something like

 setTimeout(function(){
        myFunction("so1", "flipping-right");
 }, 1000);
 setTimeout(function(){
        myFunction("so2", "flipping-left");  
 }, 2000);
 setTimeout(function(){
        myFunction("so1", "flipping-right");
 }, 3000);
 setTimeout(function(){
       myFunction("so3", "flipping-top");
 }, 4000);
 setTimeout(function(){
        myFunction("so5", "flipping-right");
 }, 5000);

Here is the fiddle updated assuming the second behavior is what you wanted.

Upvotes: 1

Related Questions