jQuery 动画（不同的选择器和不同的操作）
我对脚本编写特别是 jQuery 非常陌生，尽管我彻底尝试找到问题的答案，但我还是不太明白。
我正在为该网站制作一个非 Flash 动画介绍。 这是动画部分的代码（其中一部分......但其余部分就像这样）。 我需要的是弄清楚如何在完成后循环播放该动画，而不刷新页面。请帮忙！
<script type="text/javascript">
$(document).ready(function() {
$('#pic0').delay(2000).animate({opacity:1.0}, {duration: 3000, queue: true});
$('#pic0-d').delay(4000).animate({opacity:1.0}, {duration: 1700, queue: true});
$('#pic0-i').delay(5000).animate({opacity:1.0}, {duration: 1700, queue: true});
$('#pic0-e').delay(6000).animate({opacity:1.0}, {duration: 1700, queue: true});
$('#pic0-n').delay(7000).animate({opacity:1.0}, {duration: 1700, queue: true});
$('#pic0-s').delay(8000).animate({opacity:1.0}, {duration: 1700, queue: true});
$('#pic0-g').delay(9000).animate({opacity:1.0}, {duration: 1700, queue: true});
//this list goes on, but i figured this is enough for example purposes
});
$(function() {
$("#enter").delay(2000).animate({opacity:1.0}, { duration: 2000, queue: true });
$("#enter").hover(highlight, highlight);
});
function highlight (evt) {
$("#enter").toggleClass("highlighted");
}
</script>
我需要在循环中制作动画的部分是 $pic0 到 #pic0-g...如果有人能给我提示，我将非常感激。我试图找到一种方法将所有动画组合在一个函数中，但在组合不同的选择器和不同的操作时遇到问题。
I'm very new to the scripting and jQuery in particular, and even though i thoroughly tried to find an answer to my question, i didn't quite get it.
I'm building a non-flash animation intro for the site.
Here's the code (a part of it... but the rest works just like this) of the animated parts.
What i need is to figure out how to loop this animation after it's done, without refreshing the page. Please, help!
<script type="text/javascript">
$(document).ready(function() {
$('#pic0').delay(2000).animate({opacity:1.0}, {duration: 3000, queue: true});
$('#pic0-d').delay(4000).animate({opacity:1.0}, {duration: 1700, queue: true});
$('#pic0-i').delay(5000).animate({opacity:1.0}, {duration: 1700, queue: true});
$('#pic0-e').delay(6000).animate({opacity:1.0}, {duration: 1700, queue: true});
$('#pic0-n').delay(7000).animate({opacity:1.0}, {duration: 1700, queue: true});
$('#pic0-s').delay(8000).animate({opacity:1.0}, {duration: 1700, queue: true});
$('#pic0-g').delay(9000).animate({opacity:1.0}, {duration: 1700, queue: true});
//this list goes on, but i figured this is enough for example purposes
});
$(function() {
$("#enter").delay(2000).animate({opacity:1.0}, { duration: 2000, queue: true });
$("#enter").hover(highlight, highlight);
});
function highlight (evt) {
$("#enter").toggleClass("highlighted");
}
</script>
The parts that i need to animate on loop are $pic0 through #pic0-g.... I would hugely appreciate if someone could give me a tip. I tried to find a way to combine all the animations in one function, but has problems combining different selectors AND different actions.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我会将所有动画放入一个函数中，然后在最后一个动画完成时调用它（请注意，在 .queue() 的 jQuery 文档）。
这可以这样做：
I would put all the animations in a function and then call it when the last animation is complete (notice that the same thing is done in the jQuery documentation for .queue()).
This can be done like this:
您可能需要使用 setTimeout()，并将需要循环的部分放入函数调用中。
例如：
然后在AnimationFunctionName()结束时，再次调用setTimeout，就会循环。
You'll probably want to use setTimeout(), and put the parts you need to loop in the function call.
E.g:
Then at the end of AnimationFunctionName(), call setTimeout again, and it will loop.