mouseover image jQueryを使用して別の画像を表示

Question

私は画像を持っています。マウスオーバーすると、最初の画像を上から下に上にスライドさせる別の画像が必要になります。マウスオーバー時に、画像は再び消え、上から下にスライドして最初の画像を再表示します。

jQueryでこれを行う方法は？私はanimateとslidetoggleを試しましたが、うまく動作しません。

EDIT：このようなソリューション

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