jQuery動畫控制序列

Question

我正在試圖建立一個有動畫的主頁。雖然我很難控制動畫。我需要的只是隱藏元素，然後在一定時間後顯示元素。循環播放該序列，並在某人懸停在該框上時暫停並顯示所有元素。 Example簡單的動畫。

我還有很長的路要走。起初我嘗試使用.css（）可見性屬性，現在我使用.show（）和.hide（）。

我需要一種方法來循環播放我的動畫。我試圖添加另一個

setTimeout(clear1(), 3000); 

到我的box1函數的結尾，但那不會因爲某些原因而工作。

我需要一種讓用戶將鼠標懸停在＃box1上的方式，即所有動畫都會停止。我嘗試過使用.clearQueue，但我無法讓它工作。

Answer 1

我使用了setTimeout和clearTimeout，並定期調用一個函數來遞增（並重置）要顯示的框。由於我將setTimout指定爲boxt，因此我可以在box1的懸停事件上致電clearTimeout(boxt)，以便我可以專門停止該循環。這是我的jsfiddle。這可能不是你想要達到的確切效果，但它應該是正確的功能，並且可以通過一些調整輕鬆適應。讓我知道這對你的作品，如果你有任何問題，它的工作原理:)

Answer 2

下面是做這件事：

// 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 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 +褪色所有元素
• 重啓鼠標離開你loop功能。

Answer 4

首先，設置你的CSS：

.box {display: none;} 

SHOW所有盒子懸停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); 
    } 
}