鼠标悬停图像并显示另一个，使用jQuery

Question

我有一个图像，当我鼠标悬停，我想另一个图像从底部向上“滑动”第一个图像。在鼠标悬停时，图像应该再次消失，从上到下滑动，再次显示第一张图像。

如何用jQuery做到这一点？我试过animate和slidetoggle，但我无法使它工作。

编辑：解

<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

大约是这样的;

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

...给予或采取几个变量

或使用的代码（未经测试，但应该工作）;

<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. 
    }); 
});