jQuery 动画控制序列答案

【问题标题】：jQuery Animations Control SequencejQuery 动画控制序列
【发布时间】：2013-04-14 13:55:39
【问题描述】：

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

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

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

setTimeout(clear1(), 3000);

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

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

【问题讨论】：

所以你需要在用户将鼠标悬停在第一个框上时暂停动画，并在光标离开第一个框时重新启动动画？
你看过stopjQuery方法吗？ api.jquery.com/stop
我看过了。我无法正确实现它。它需要停止动画并确保显示所有 div。

标签： javascript jquery html

【解决方案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);
    }
}

【讨论】：

【解决方案2】：

我使用了setTimeout 和clearTimeout 并定期调用一个函数来增加（和重置）要显示的框。由于我将setTimout 分配给boxt，因此我可以在box1 的悬停事件上调用clearTimeout(boxt)，以便我可以专门停止该循环。这是我的jsfiddle。它可能不是您想要达到的确切效果，但它应该是正确的功能，并且可以通过一些调整轻松适应。让我知道这是否适合您，如果您对它的工作原理有任何疑问:)

【讨论】：

【解决方案3】：

LIVE DEMO

  var $box = $('#box1').find('.box'),
      boxN = $box.length,
      c = 0,
      intv;

  $box.eq(c).show(); // Show initially the '0' indexed .box (first one)

  function loop(){
    intv = setInterval(function(){
       $box.eq(++c%boxN).fadeTo(400,1).siblings().fadeTo(400,0);
    },1000);
  }
  loop(); // Start your loop

  $('#box1').on('mouseenter mouseleave', function( e ){
    return e.type=='mouseenter' ? (clearInterval(intv))($box.fadeTo(400,1)) : loop();
  });

++c%boxN 将注意在 setInterval 中使用模数 %（提醒）运算符循环动画。
您需要做的就是注册 mouseenter 和 mouseleave在父元素上：

在 mouseenter 上清除 Interval + 淡化所有元素
在 mouseleave 上重新启动 loop 函数。

【讨论】：

【解决方案4】：

这是一种方法：

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

演示：http://jsfiddle.net/louisbros/dKcn5/

【讨论】：