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