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 fiddle。非常感谢。

http://jsfiddle.net/VqWuv/

4

2 回答 2

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

然后停止计时器：clearTimeout(timer);

尝试使用您的代码的细节。

于 2013-08-16T14:08:25.420 回答
1

您可以使用标志来控制循环

function ReStartAnimation() {
    setTimeout(function () {
        if (!stopAnimation) fadeItIn();
        else ReStartAnimation()
    }, 5000);
}

见工作小提琴

于 2013-08-16T14:15:40.137 回答