Mouseenter issue in jquery slide animation

[Aleshanee]

I try to create with jquery a simple hover-sliding. Here is my example

My first problem ist the mouseenter is, when a users the duck and while the duck slides up the user is going to mouseenter the cow, the sliding want to show both slides and do ugly stuff (see my expamle - just try it)

Here is my Fiddle

I think there must be a solution, like disable the other mouseenter until the first ended with its sliding.

My second trouble is that every time the page was new loaded (F5), the pictures have to load. (The duck vanished for a second and slide completed up - and the cow slides too fast for the first time) After this "loading" (hovering) the pictures sliding pretty. I already tried to use:

$(window).load(function(){...});

instead of:

$(document).ready(function(){...});

(I tested my second problem already online, its not a jsfiddle problem)

Any other ideas? Thank you in advance!

My first problem ist the mouseenter is, when a users the duck and while the duck slides up the user is going to mouseenter the cow, the sliding want to show both slides and do ugly stuff (see my expamle - just try it)

@Aleshanee

Where did you get this code? Is this from an tutorial?