鼠標懸停圖像並顯示另一個，使用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. 
    }); 
});