2

我有一个适用于某些 div 的函数，每 2 秒一次，在其中我想等待 1 秒来调用相同的方法，但给出其他 div，效果是，问题是我如何等待那一秒（目前每 2 秒一次） divs 执行效果，我想在 1 秒行中执行）。

$(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);
}

请看一下我的代码

4

4 回答 4

1

你几乎做对了，问题是你有函数调用，你需要传递函数本身。setTimeout接受一个函数参数，因此您需要将一个函数传递给它。

试试（在里面setInterval）

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

如果您想一个接一个地执行它们，您可以执行类似的操作

 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);

假设第二种行为是您想要的，这是更新的小提琴。

于 2013-03-15T00:40:15.937 回答
1

我不确定您是否要循环动画，但无论哪种方式，您都应该使用setTimeout并调用链中的每个元素：

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

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

我建议将效果存储在元素本身上，data-effect="flipping-right"因为似乎没有任何其他类型的可计算顺序。至于nextID，您可以使用该.next()元素代替，也可以将 1 添加到当前 id。$elem.length如果你想让它循环，那么如果 id为零，则将 id 重置为 1 。

于 2013-03-15T00:45:51.690 回答
1 
$(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);
}

可能看起来像这样

于 2013-03-15T00:54:20.677 回答
1

如果您想对时序进行更多控制，您可以将元素之间的延迟传递给函数。通过这种方式，您可以调整集合迭代之间的时间。

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;
    });
});
于 2013-03-15T01:05:54.753 回答