Question

I have two different .animate functions..

1. Slides down the elements on document ready.
2. Adds mouseover effect to these same elements.

Problem here is that IF you happen to have your mouse over the area where the elements slide in on document ready, they will stop in the position where your mouse was in.

The goal of course is to let the elements slide on their own without any interruptions.

http://photoshopmesta.net/sic/theTest/slide.html

Another thing.. the mouseleave seems to move the element slightly higher position than it was before the mouseover…

Any ideas on the image load? I put code in that loads the image file on document ready. It loads the images as fast as it is able to, but i didnt think of it that the elements will still slide no matter if the image is loaded or not.. and of course theyre not loaded before the sliding action.. :/

Edit:

Working example thanks to @entropo http://jsfiddle.net/PnHpk/7/ Though it might be so that the images disappear from there after some time so heres example with color backgrounds instead of images http://jsfiddle.net/PnHpk/8/

Answer 1

I put your example in jsfiddle: http://jsfiddle.net/entropo/PnHpk/

This is a good practice when asking questions here because it helps people answer you with a working example.

Here’s my take on getting it to work:
http://jsfiddle.net/entropo/PnHpk/7/

I take advantage of jQuery 1.5’s new Deferred objects.
See: SO ‘[jquery] deferred‘ search

Also, this isn’t exactly what I did (I preferred using push to make a Promise stack), but this is helpful: Deferred promises and synchronizing jquery.animate()