1

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

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

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

setTimeout(clear1(), 3000);

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

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

4

4 回答 4

2

首先，设置你的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);
    }
}
于 2013-04-14T04:33:35.877 回答
1

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

于 2013-04-14T04:09:18.870 回答
0

这是一种方法：

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

于 2013-04-14T04:11:50.773 回答
0

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

Where++c%boxN将注意%使用setInterval.
您需要做的就是在父元素上注册一个mouseenterand以：mouseleave

  • 清除 mouseenter 上的间隔 + 淡化所有元素
  • loop在 mouseleave 上重新启动您的功能。
于 2013-04-14T04:25:34.137 回答