Question

我有一个执行无限次的函数。它是一个带有中央按钮的脉冲动画。这是代码。

    $('#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/

Answer 1

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

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

尝试使用您的代码细节。

Answer 2

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

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

见工作fiddle

如何在当前运行时使用无限循环停止Jquery函数

2 个答案: