[英]how to execute a series of animations one after another using jquery?
This will animate the second image after the first animation is complete: 这将在第一个动画完成后为第二个图像设置动画:
<script type="text/javascript">
$(document).ready(function () {
$('#image1').show("slide", { direction: 'left' }, 1000,
function() { $('#image2').show("slide", { direction: 'left' }, 1000)});
</script>
If I have four images I tried below - and only the first two images animate. 如果我有四张图片,我试过下面 - 只有前两幅图像有效。
<script type="text/javascript">
$(document).ready(function () {
$('#image1').show("slide", { direction: 'left' }, 1000,
function() { $('#image2').show("slide", { direction: 'left' }, 1000)},
function () { $('#image3').show("slide", { direction: 'left' }, 1000)},
function () { $('#image4').show("slide", { direction: 'left' }, 1000)});
</script>
So what would be an effective way to animate all the images (4) in sequence? 那么,按顺序为所有图像(4)制作动画的有效方法是什么?
$('#image1').show("slide", { direction: 'left' }, 1000, function() {
$('#image2').show("slide", { direction: 'left' }, 1000, function () {
$('#image3').show("slide", { direction: 'left' }, 1000, function () {
$('#image4').show("slide", { direction: 'left' }, 1000);
});
});
});
you could also do: 你也可以这样做:
slide(1);
function slide(id){
if(id<5){
$('#image'+id).show("slide", { direction: 'left' }, 1000, function(){ slide(id+1));
}
}
I think the syntax/formatting is just off here. 我认为语法/格式就在这里。 You have closing braces where you shouldn't on the second and third lines. 你有关闭括号,你不应该在第二和第三行。
<script type="text/javascript">
$(document).ready(function () {
$('#image1').show("slide", { direction: 'left' }, 1000, function() {
$('#image2').show("slide", { direction: 'left' }, 1000, function () {
$('#image3').show("slide", { direction: 'left' }, 1000, function () {
$('#image4').show("slide", { direction: 'left' }, 1000);
});
});
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.