Geek Answers Handbook

JQuery.animate () does not perform the first animation properly

I have a problem with the slideshow I am writing. The problem is that I have an animation that runs every time a slide changes. It works great every time, but the first thing is that it just changed without animation.

Reducing the problem is something like this: http://jsfiddle.net/pyriku/XYLCH/ . Blocks should move slowly, but the first time each block moves, it does inaccurate.

Does anyone have any idea what is going on? Thanks!

+4
source share
1 answer

This is somehow related to the first selected square having the top property set using the CSS selector. Take a look at this fiddle: http://jsfiddle.net/XYLCH/2/

I removed the .selected selector in your CSS and added style="top: 50px;" as an attribute for the first div. I also added top: 10px to the CSS .squares selector to prevent square jumps for the first time.

The problem is this: you add the .selected class to the square that is about to move, which sets the top property to 50px . Then you try to animate it to top: 50px , but it already exists because you added the .selected class.

+3
source

More articles:


All Articles