javascript - jQuery 动画控制序列

Question

我正在尝试构建一个包含动画的主页。虽然我很难控制我的动画。我只需要隐藏元素，然后在一定时间后显示元素。循环遍历该序列，并在有人将鼠标悬停在框上时暂停并显示所有元素。 Example简单的动画。

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

我需要一种循环播放我的动画的方法。我尝试添加另一个

setTimeout(clear1(), 3000);

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

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

Answer 1

首先，设置你的CSS:

.box {display: none;}

悬停时显示所有框 See Demo

这将在悬停时显示所有框，然后从停止的地方继续播放动画(将隐藏动画期间未显示的框)。我认为这就是您所追求的。

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);
    }
}

悬停时暂停 See Demo

这只会暂停动画并从停止的地方继续。

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);
    }
}