Jquery 帮助，循环动画

发布于 2024-11-18 20:33:51 字数 633 浏览 3 评论 0原文

我是 jQuery 菜鸟，我该如何循环这个？如果可能的话，我可以把它整理一下，这样用更少的代码就能达到同样的效果吗？

$(document).ready(function() {
    speech_animation();
});

 function speech_animation(){  
    $( "#b-block_wrap" ).delay(1000).fadeIn(500).animate({ top: 0}, {duration: 500,});
    $( "#p-block_wrap" ).delay(2000).fadeIn(500).animate({ top: 0,}, {duration: 500,});
    $("#first_wrap").delay(5500).fadeOut(500);
    $( "#g-block_wrap" ).delay(6000).fadeIn(500).animate({ top: 0}, {duration: 500,});
    $( "#y-block_wrap" ).delay(7000).fadeIn(500).animate({ top: 0}, {duration: 500,});
    $("#second_wrap").delay(10500).fadeOut(500);
}

原文

i'm a jQuery noob, how do I loop this? If possible, can I neaten this up aswell so it works the same with less code?

$(document).ready(function() {
    speech_animation();
});

 function speech_animation(){  
    $( "#b-block_wrap" ).delay(1000).fadeIn(500).animate({ top: 0}, {duration: 500,});
    $( "#p-block_wrap" ).delay(2000).fadeIn(500).animate({ top: 0,}, {duration: 500,});
    $("#first_wrap").delay(5500).fadeOut(500);
    $( "#g-block_wrap" ).delay(6000).fadeIn(500).animate({ top: 0}, {duration: 500,});
    $( "#y-block_wrap" ).delay(7000).fadeIn(500).animate({ top: 0}, {duration: 500,});
    $("#second_wrap").delay(10500).fadeOut(500);
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

踏雪无痕 2024-11-25 20:33:51

您可以在最后一个函数调用中使用回调，这样一旦最后一个函数调用完成，它就会调用自身。

$(document).ready(function() {
    speech_animation();
});

 function speech_animation(){  
    $( "#b-block_wrap" ).delay(1000).fadeIn(500).animate({ top: 0}, {duration: 500,});
    $( "#p-block_wrap" ).delay(2000).fadeIn(500).animate({ top: 0,}, {duration: 500,});
    $("#first_wrap").delay(5500).fadeOut(500);
    $( "#g-block_wrap" ).delay(6000).fadeIn(500).animate({ top: 0}, {duration: 500,});
    $( "#y-block_wrap" ).delay(7000).fadeIn(500).animate({ top: 0}, {duration: 500,});
    $("#second_wrap").delay(10500).fadeOut(500, speech_animation);//callback here
}

You can use a call back in your last function call so that as soon as the last function call is finished, it would call itself.

$(document).ready(function() {
    speech_animation();
});

 function speech_animation(){  
    $( "#b-block_wrap" ).delay(1000).fadeIn(500).animate({ top: 0}, {duration: 500,});
    $( "#p-block_wrap" ).delay(2000).fadeIn(500).animate({ top: 0,}, {duration: 500,});
    $("#first_wrap").delay(5500).fadeOut(500);
    $( "#g-block_wrap" ).delay(6000).fadeIn(500).animate({ top: 0}, {duration: 500,});
    $( "#y-block_wrap" ).delay(7000).fadeIn(500).animate({ top: 0}, {duration: 500,});
    $("#second_wrap").delay(10500).fadeOut(500, speech_animation);//callback here
}

回复收藏 0 原文

~没有更多了~