我有4张图片(logo-1,logo-2,logo-3和logo-4),当我点击按钮时,我想一个接一个地显示它们。
首先,我将图像的高度设置为0,以使用easeOutBounce效果显示它们。
我正在使用动画功能,但这四个图像同时显示。
如何连接动画?
<script>
function mostrar(num_logo) {
if (num_logo <= 4) {
$("#logo-"+num_logo)
.stop().animate(
{height: '218px'},
{queue:false,
duration:1000,
easing: 'easeOutBounce',
complete: mostrar(num_logo+1)}
);
}
}
$(function() {
// run the currently selected effect
function runEffect() {
for (i=1;i<=4;i++) {
$("#logo-"+i).css('height', '0px');
}
mostrar(1);
};
$( "#button" ).click(function() {
runEffect();
return false;
});
});
</script>
答案 0 :(得分:2)
这是我用来回答一个非常相似的问题的问题:http://jsfiddle.net/jJ8vJ/(问题可以在这里找到:how to animate position in Order?)。
基本思想是设置一个jQuery对象数组(要按顺序设置动画的元素)并使用.animate()
函数的回调按顺序为元素设置动画
var $items = [$('#one'), $('#two'), $('#three'), $('#four')],//stores the DOM elements to be animated in order
item_index = 0,//stores the current index in the animation queue
animations = {
'0px0px' : { left : '100px', top : '0px' },//0px0px means the element is at the top left
'100px0px' : { left : '100px', top : '100px' },//100px0px means the element is at the top right
'0px100px' : { left : '0px' , top : '0px' },//0px100px means the element is at the bottom left
'100px100px' : { left : '0px' , top : '100px' }//100px100px means the element is at the bottom right
};//this stores the conversion between where the element is and where it should animate to
//setup a function that can call itself inside the animation callback to iterate through the DOM elements to be animated
function run_animation($element) {
//check to make sure there are more DOM elements to animate, if none are found then the process is done
if (item_index in $items) {
//get this element's top and left CSS properties and put them together so we can convert that to the next coordinates it needs
var css = $items[item_index].css('left') + '' + $items[item_index].css('top');
//now animate this element by converting the current top/left CSS properties to its next coordinates
$items[item_index].animate({
left : animations[css].left,
top : animations[css].top
}, 1500, function () {
//here we run this same function for the next index
item_index++;
run_animation($items[item_index]);
});
}
}
//run the animation function for the first time
run_animation($items[item_index]);
答案 1 :(得分:2)
Jasper的答案很好。我给你一些你应该阅读的链接:它们解释了你在代码中犯下的一些常见错误以及如何避免错误;)