Question

我有一张图片，当我鼠标悬停时，我希望另一张图片从下往上“滑动”在第一张图片上。在mouseout上，图像应该再次消失，从上到下滑动，再次显示第一张图像。

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

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

1 个答案: