这是我的动画实验，它主要按照我的预期运作。但是，我希望动画逐一发生。这意味着具有id1的div首先执行动画，然后使用id2执行div ...等等。我使用for循环来做这个技巧，但动画发生得太快了。任何人都可以让我知道如何让动画逐个发生，而不是几乎同时动画所有的div。提前感谢任何帮助者。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>jQuery Animation - jsFiddle demo by dennisboys</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.items {
float: left;
margin-right: 3px;
height: 50px;
width: 50px;
background-color: lightblue;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
/*
Javascript logics:
1. One click on each div can generate a full animation.
- using a for loop to do the div animation
*/
$(document).ready(function(){
// global variable for holding a fixed height increase
var newHeight = 50;
// global counter to keep track of which div is being clicked
var counter = 1
// count the number of divs on this page, a total of 9
var divCount = $('.items').length;
$('.items').click(
function(){
for(i=1; i<=divCount; i++){
// increase the global variable by 50
newHeight += 50;
// set random width and height
var randomWidth = Math.floor( Math.random() * 201 + 50 ); // generate a number from 50 - 250
var randomHeight = Math.floor( Math.random() * 201 + 50 );
$('#' + i).animate( {width:randomWidth, opacity:'0.3'}, 1000 );
$('#' + i).animate( {height:randomHeight, opacity:'1' }, 1000 );
$('#' + i).animate( {width:'50', opacity:'1'}, 1000 );
$('#' + i).animate( {height:newHeight, opacity:'1' }, 1000 );
}
});
});
});//]]>
</script>
</head>
<body>
<div class="items" id="1" status="true"></div>
<div class="items" id="2" status="true"></div>
<div class="items" id="3" status="true"></div>
<div class="items" id="4" status="true"></div>
<div class="items" id="5" status="true"></div>
<div class="items" id="6" status="true"></div>
<div class="items" id="7" status="true"></div>
<div class="items" id="8" status="true"></div>
<div class="items" id="9" status="true"></div>
</body>
</html>
这是jsfiddle页面。
答案 0 :(得分：1)
您可以在动画步骤完成时设置函数调用，而不是尝试延迟动画并处理我们的计时等。
animate()函数可选择接受额外参数。来自the manual：
.animate（properties [，duration] [，easing] [，complete]）
...
<强>完整
输入：Function()
动画完成后调用的函数。
这意味着您可以在动画完成时调用函数。这是一个简单的例子：
$('div').click(function() {
$(this).animate({width: 200}, 5000, function() {
alert('animation complete');
});
});
在上面的代码中，我们在初始动画（宽度：200px）完成后弹出一条消息。
那么这对你有什么用呢？ 那么，如果我们在第一个动画完成后调用第二个动画，在第三个动画完成之后调用第二个动画，依此类推怎么办？
$('#' + i).animate({width:randomWidth, opacity:'0.3'} , 1000, function() {
$(this).animate({height:randomHeight, opacity:'1' }, 1000, function() {
$(this).animate({width:'50', opacity:'1'}, 1000, function() {
$(this).animate( {height:newHeight, opacity:'1' }, 1000);
});
});
});
编辑：以下是重构后的代码：
function letsGo(i, newHeight) {
var randomWidth = Math.floor(Math.random() * 201 + 50);
var randomHeight = Math.floor(Math.random() * 201 + 50);
$('#' + i).animate({width:randomWidth, opacity:'0.3'} , 1000, function() {
$(this).animate({height:randomHeight, opacity:'1' }, 1000, function() {
$(this).animate({width:'50', opacity:'1'}, 1000, function() {
$(this).animate( {height:newHeight, opacity:'1' }, 1000);
});
});
});
}
$('.items').click(function () {
var newHeight = 50;
var divCount = $('.items').length;
for(i=1; i<=divCount; i++) {
letsGo(i, newHeight);
newHeight += 50;
};
});
答案 1 :(得分：0)
为什么不使用延迟......
这里有类似的东西
$(document).ready(function() {
$('#1').delay(8000).fadeIn(400);
$('#2').delay(7000).fadeIn(400);
});
但请确保首先隐藏你的div
<div class="items" id="1" status="true" **style="display:none"**></div>
答案 2 :(得分：0)
好的，我在评论中的建议只是简单的样本，延迟时间太长，以及动画持续时间。这是你的js代码改变了，所以你在延迟方面有一些更平滑的重叠，以及更快的动画（我已经把一些注释作为解释）：
$(document).ready(function(){
// global variable for holding a fixed height increase
var newHeight = 50;
// global counter to keep track of which div is being clicked
var counter = 1
// count the number of divs on this page, a total of 9
var divCount = $('.items').length;
$('.items').click(
function(){
for(i=0; i<=divCount; i++){ //i=0, so first animation doesn't have delay. It can be done other ways, this is just one of them.
// increase the global variable by 50
newHeight += 50;
var delayInit = 300-20*i; //this way we have overlap delays, so next animation of new element starts as previous is still doing
var animationDuration = 300; //better to have out this param, so you can change it at one place
// set random width and height
var randomWidth = Math.floor( Math.random() * 201 + 50 ); // generate a number from 50 - 250
var randomHeight = Math.floor( Math.random() * 201 + 50 );
$('#div' + (i+1)).delay(delayInit*i).animate( {width:randomWidth, opacity:'0.3'}, animationDuration,'linear' ); //if you want smoother animations, try to add after animationDuration some other easing option like easeOut, swing, linear, etc. instead of 'linear'.
//For further and correct reference, consult with: http://api.jquery.com/animate/#animate-properties-duration-easing-complete
$('#div' + (i+1)).delay(delayInit*i).animate( {height:randomHeight, opacity:'1' }, animationDuration );
$('#div' + (i+1)).delay(delayInit*i).animate( {width:'50', opacity:'1'}, animationDuration);
$('#div' + (i+1)).delay(delayInit*i).animate( {height:newHeight, opacity:'1' }, animationDuration );
}
});
});
另外，你会注意到我改变了选择器，所以我建议你也这样做，所以为id分配div1，div2等等...尝试避免使用纯数字。 此外，您将看到我从0开始更改循环计数。