Question

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

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

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

setTimeout(clear1(), 3000);

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

我需要一种方法让用户悬停在＃box1上，所有动画都会停止。我尝试过使用.clearQueue，但我无法使用它。

Answer 1

首先，设置为你的css：

.box {display: none;}

显示HOVER上的所有信息 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);
    }
}

Answer 2

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

Answer 3

这是一种方法：

// 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/

Answer 4

的 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：

清除鼠标中心间隔+淡化所有元素

在mouseleave上重新启动loop功能。

jQuery动画控制序列

4 个答案: