jQuery: animated, continuous loop through children

蓝咒 提交于 2019-12-10 03:17:18

问题


Close but not quite there. I'd like to have the first child div displayed for a couple seconds, slide down (via positioning) and fade out of view, then the next child slide up and fade into view. Repeat continuously, looping back after the last child is displayed.

Looks like I've got the loop working though the count seems to pile the child divs on top of each other. What am I doing wrong?

http://jsfiddle.net/rrbaker/Xmk2y/4/


回答1:


Here's my remix: http://jsfiddle.net/ddrace/DJuV7/1/

I rearranged some things to make it more understandable and added settings for the pause and animation to keep it DRY and easier to tweak.




回答2:


Does this look ok http://jsfiddle.net/Xmk2y/5/

I removed the delay , set i = 0 and swapped top values.




回答3:


http://jsfiddle.net/Quincy/Xmk2y/8/

Just using the complete callback to recursively invoke nextQuote




回答4:


It seems there were a few issues according to what you had mentioned. First was setting the index to -1. That seemed to cause the display all issue. Next was the animations, i have updated it to use jquery promises to ensure that the animation of the previous was finished.

End result: http://jsfiddle.net/bfbuS/2/

jQuery Promise: http://api.jquery.com/promise/




回答5:


Well, this works too: http://jsfiddle.net/Xmk2y/7/. But I think I like Birey's solution better.



来源:https://stackoverflow.com/questions/7962244/jquery-animated-continuous-loop-through-children

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!