Question

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.

How to do this with jQuery? I tried animate and slidetoggle, but I can’t get it working.

EDIT: solution

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

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

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

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

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

Answer 1

Approximately something like this;

<style>
#wrap{width:200px;height:200px;position:relative;}
img{width:200px;height:200px;}
#img2{position:absolute;top:200px;left:0}
</style>

<div id='wrap'>
<img id='img1' src='blah' />
<img id='img2' src='blah' />
</div>

<script>
$(function(){
 $('#wrap').mouseenter(function(){
  $('#img2').stop().animate({top:'0px'})
 })
}).mouseleave(function(){
  $('#img2').stop().animate({top:'200px'}) 
});
</script>

… give or take a few variables

Or using your code (untested but should work);

<div id='wrap' style='position:relative'>
<img class="image" style="position:absolute;top:0;left;0;z-index:1;" class="first"  src="images/stories/logos/in-dialoog.gif" alt="logo" />
<img style="position:absolute;top:0;left:0;z-index:0;" class="second" src="images/stories/logos/c-riders.gif" alt="logo" />
</div>

$('#wrap').mouseover(function(){
    $('.second').animate({   
        height: 'toggle'
    }, 800, function() {
        // Animation complete.
    });
}).mouseout(function(){
    $('.second').animate({   
        height: 'toggle'
    }, 800, function() {
        // Animation complete.
    });
});