Mouseover .animate stops prior .animate

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

The reason its doing that is because you have a .stop in the mouseover and mouseout. Obviously it makes sense to have them there, so what you should do is set the mouseover and mouseout events after the onload animations have finished.

Also if you want to wait until the image is done loading to play the animation, then use the image's .load event rather than the document .ready event

Edit: The elements move up slightly after the mouseover because they initially start with a margin-top of 10px but the animation sets it to 0px on mouseout

Edit2:

Instead of using the preloader for that image, use something like this:

$(document).ready(function()
{
    var img = document.createElement('img');

    img.onload = function()
    {
        console.log("%o finished loading", this);
        //Set mouseover/mouseout event here
    };

    img.src = 'linkit.png';
});

Answer 2

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()