Javascript jQuery动画控制序列

我正试图建立一个主页，有动画。但是我很难控制我的动画。我只需要隐藏元素，然后在一段时间后显示元素。循环浏览该序列，当某人将鼠标悬停在框上时，暂停并显示所有元素。简单的动画

我还有很长的路要走。起初我尝试使用.css（）可见性属性，现在我使用.show（）和.hide（）

我需要一种方法来循环我的动画。我试图补充另一点

setTimeout(clear1(), 3000);

到我的box1函数的末尾，但由于某些原因，这不起作用

---

我需要一种方法让用户将鼠标悬停在#box1上，所有动画都停止。我曾尝试使用.clearQueue，但无法使其正常工作。

我使用了

setTimeout

和

clearTimeout

并定期调用一个函数来增加（并重置）要显示的框。由于我将

settimeout

分配给

boxt

，因此我能够调用

box1

的悬停事件上的

clearTimeout（boxt）

，以便我能够具体停止该循环。这是我的。它可能不是您想要达到的确切效果，但它应该是正确的功能，并且可以通过一些调整轻松地进行调整。让我知道这是否适用于您，如果您对其工作原理有任何疑问：）

这里有一种方法：

// hide all of the boxes
$('.box').hide();

// reference to each box, the current box in this list and a flag to stop the animation
var divs = box1.getElementsByClassName('box');
var i = 0;
var run = true;

// this will animate each box one after the other
function fade(){
    if(i < divs.length && run){
        $(divs[i++]).fadeIn(500, function(){
            setTimeout(fade, 1000);
        });
    }
};
fade();

// stop the above function from running when the mouse enters `box1`
$('#box1').on('mouseenter', function(){console.log('enter');
    run = false;
});

// start the function again from where we stopped it when the mouse leaves `box1`
$('#box1').on('mouseleave', function(){console.log('leave');
    run = true;
    fade();
});

//隐藏所有框
$（'.box'）.hide（）；
//引用每个框、此列表中的当前框和停止动画的标志
var divs=box1.getElementsByClassName（'box'）；
var i=0；
var-run=true；
//这将一个接一个地设置每个长方体的动画
函数fade（）{
如果（i

演示：

如果

++c%boxN

将注意在

设置间隔内使用Modulo
%
（提醒）操作符循环动画，则只需在父元素上注册
鼠标指针
和
鼠标移动
：


清除鼠标上的间隔并淡出所有元素
在mouseleave上重新启动
循环
功能
首先，设置您的css：

.box {display: none;}

悬停时显示所有框

这将显示悬停时的所有框，然后从停止的位置继续动画（将隐藏动画期间未显示的框）。我想这就是你想要的

var index = 0; // To keep track of the last div showed during animation
var time_of_delay = 1000; // Set the time of delay

// Start the animation
$(document).ready(function () {
    box1(time_of_delay);
});

// The hover states
$("#box1_1").hover(
    function() {
        box1(0);
    }, function() {
        box1(time_of_delay);
    });

// The animation function
function box1 (delay_time) { 
    var time=delay_time;
    if(time>0) {
        $(".box").slice(index).each(function() {
            $(this).hide().delay(time).show(0);
            time=time+time_of_delay;
        });   
        index=0;
    } else {
        $(".box:visible").each(function() {
            index++;
        });
        $(".box").stop(true).show(0);
    }
}

悬停时暂停

这将仅暂停动画并从其停止的位置继续

var time_of_delay = 1000; // Set the time of delay

// Start the animation
$(document).ready(function () {
  box1(time_of_delay);
});

// The hover states
$("#box1_1").hover(
  function() {
    box1(0);
  }, function() {
    box1(time_of_delay);
});

// The animation function
function box1 (delay_time) { 
    var time=delay_time;
    if(time>0) {
        $(".box:hidden").each(function() {
          $(this).delay(time).show(0);
          time=time+time_of_delay;
        });
    } else {
        $(".box").stop(true);
    }
}

因此，当用户将鼠标悬停在框1上时，需要暂停动画，当光标离开框1时，需要重新启动动画？您是否查看了
stop
jQuery方法？我看了看。我不能正确地执行它。它需要停止动画并确保显示所有div。
var time_of_delay = 1000; // Set the time of delay

// Start the animation
$(document).ready(function () {
  box1(time_of_delay);
});

// The hover states
$("#box1_1").hover(
  function() {
    box1(0);
  }, function() {
    box1(time_of_delay);
});

// The animation function
function box1 (delay_time) { 
    var time=delay_time;
    if(time>0) {
        $(".box:hidden").each(function() {
          $(this).delay(time).show(0);
          time=time+time_of_delay;
        });
    } else {
        $(".box").stop(true);
    }
}