jQuery.animate() does not do the first animation properly_问答_开发者

jQuery.animate() does not do the first animation properly

开发者 https://www.devze.com 2023-04-05 01:06 出处：网络

I\'m having a problem with a slideshow I\'m writing. The problem is that I have an animation that runs every time an slide i开发者_JS百科s changed. It works fine every time but the first, that it just

相关专题：jquery

I'm having a problem with a slideshow I'm writing. The problem is that I have an animation that runs every time an slide i开发者_JS百科s changed. It works fine every time but the first, that it just changed without the animation.

Reducing the problem, it's something like this: http://jsfiddle.net/pyriku/XYLCH/. The blocks should moved slowly, but the first time each block moves, it does inmidietly.

Does anyone have an idea of what is happening? Thanks!

It has something to do with the first selected square having its top property set by a 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 to the first div. I also added top: 10px to the .squares selector in CSS to prevent the squares from jumping around the first time through.

The problem is: you are adding 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's already there because of when you added the .selected class.