mouseover an image and show another, using jQuery
<p>I have an image, and when I mouseover I want another image to 'slide' over the first image from the bottom up. On mouseout the image should disappear again, slide from top to bottom, showing the first image again.</p>

<p>How to do this with jQuery? I tried <code>animate</code> and <code>slidetoggle</code>, but I can't get it working.</p>

<p>EDIT: solution</p>

<pre><code>&lt;div class="image" style="width:90px;height:67px;position:relative;overflow:hidden"&gt;
&lt;a href="#"&gt;
&lt;img style="position:absolute;top:0;left;0;z-index:1;" class="first" src="images/stories/logos/in-dialoog.gif" alt="logo" /&gt;
&lt;img style="position:absolute;top:0;left:0;z-index:0;" class="second" src="images/stories/logos/c-riders.gif" alt="logo" /&gt;
&lt;/a&gt;
&lt;/div&gt;

$('.image').mouseenter(function(){
    $('.first').stop().animate({    

        top: '56px'
    }, 800, function() {
        // Animation complete.
    });
});

$('.image').mouseleave(function(){
    $('.first').stop().animate({    

        top: '0'
    }, 800, function() {
        // Animation complete.
    });
});
</code></pre>
