Javascript 使用jQuery将鼠标悬停在图像上并显示另一个图像

我有一个图像，当我把鼠标移到上面时，我想让另一个图像从下到上“滑动”到第一个图像上。鼠标移出时，图像应再次消失，从上到下滑动，再次显示第一个图像

如何使用jQuery实现这一点？我尝试了

设置动画

和

滑动切换

，但无法正常工作

编辑：解决方案

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

$（'.image'）.mouseenter（函数（）{
$（'.first'）.stop（）.animate（{
顶部：“56px”
}，800，函数（）{
//动画完成。
});
});
$（'.image'）.mouseleave（函数（）{
$（'.first'）.stop（）.animate（{
顶部：“0”
}，800，函数（）{
//动画完成。
});
});

大概是这样的

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

#包裹{宽度：200px；高度：200px；位置：相对；}
img{宽度：200px；高度：200px；}
#img2{位置：绝对；顶部：200px；左侧：0}
$（函数（）{
$（'#wrap'）.mouseenter（函数（）{
$（'#img2'）.stop（）.animate（{top:'0px'}）
})
}).mouseleave（函数（）{
$（'#img2'）.stop（）.animate（{top:'200px'}）
});

。。。给出或获取一些变量

或者使用您的代码（未经测试，但应该可以工作）

$（'#wrap'）.mouseover（函数（）{
$（'.second'）。设置动画（{
高度：“切换”
}，800，函数（）{
//动画完成。
});
}).mouseout（函数（）{
$（'.second'）。设置动画（{
高度：“切换”
}，800，函数（）{
//动画完成。
});
});

请输入您尝试过的代码。谢谢，它（几乎）是正确的，我将在我的问题中粘贴我的版本

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