2

私はいくつかのdivで2秒ごとに機能する関数を持っています、その中で同じメソッドを呼び出すために1秒待ちたいが、他のdivを与えます、そして効果、問題はどのようにその秒を待つことができるかです（現在は2秒ごとにすべてdivはエフェクトを実行します。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

タイミングシーケンスをもう少し制御したい場合は、要素間の遅延を関数に渡すことができます。このようにして、セットの反復間のタイミングを微調整できます。

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 に答える
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()、現在の ID に 1 を追加することができます。これをループオーバーさせたい場合は、ID$elem.lengthがゼロの場合は ID を 1 にリセットします。

于 2013-03-15T00:45:51.690 に答える
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);

これは、2番目の動作があなたが望んでいたものであると仮定して更新されたフィドルです。

于 2013-03-15T00:40:15.937 に答える
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 に答える