0

無限回実行する関数があります。中央のボタンで脈打つアニメーションです。これがコードです。

    $('#child').hide();
$('#child1').hide();
$('#child2').hide();
$('#child3').hide();
$('#child4').hide();
fadeItIn();

function fadeItIn(){

// Fade Ins
    $('#child4').fadeIn(175);
    setTimeout(function(){
        $('#child3').fadeIn(175);
    },175);
    setTimeout(function(){
        $('#child2').fadeIn(175);
    },350);
    setTimeout(function(){
        $('#child1').fadeIn(175);
    },525);
    setTimeout(function(){
        $('#child').fadeIn(175);
    },700); 



// Fade Outs
    setTimeout(function(){
        $('#child').fadeOut(175);
    },875);
    setTimeout(function(){
        $('#child1').fadeOut(175);
    },1050);
    setTimeout(function(){
        $('#child2').fadeOut(175);
    },1225);
    setTimeout(function(){
        $('#child3').fadeOut(175);
    },1400);
    setTimeout(function(){
        $('#child4').fadeOut(175);
    },1575);


// Recall Function
    setTimeout(function(){
        fadeItIn();
    },5000);

};


// This function controlls the mouseover and mouseout events for the pulse


function bringForward(){
    $('#zoid1').css("z-index", "1");
    $('#zoid1').animate(
    { opacity: "1"}, 500, '');
};

function bringBack(){
    $('#zoid1').css("z-index", "-50");
    $('#zoid1').animate(
    { opacity: "0"}, 500, '');
};

$('#child5').mouseover(bringForward);
$('#zoid1').mouseout(bringBack);

私がやりたいのは、ページの別の場所でボタンをクリックしたときにこの機能を停止し、後で別のボタンをクリックしたときにアニメーションを再開したいということです。どうすればこれを達成できますか？.stop コマンドを使用してみましたが、うまくいきませんでした。これを停止する必要がある理由は、ページ上に 16 個のアニメーションがあり、すべてが異なる時間に 4 つのグループで実行され、DIV を非表示にするだけでタイミングが台無しになるように見えるためです。

プロジェクト用の JS フィドルを作成しました。本当にありがとう。

http://jsfiddle.net/VqWuv/

4

2 に答える 2

3 
var timer = setTimeout(function(){
               fadeItIn();
            },5000);

次に、タイマーを停止します。clearTimeout(timer);

コードの詳細で試してみてください。

于 2013-08-16T14:08:25.420 に答える