gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 10:18:13 25 4
gpt4 key购买 nike

我有一个图像,当我将鼠标悬停时,我希望另一个图像从下往上“滑动”到第一个图像上。鼠标移开时,图像应再次消失,从上到下滑动,再次显示第一张图像。

如何使用 jQuery 做到这一点?我尝试了 animateslidetoggle,但无法让它工作。

编辑:解决方案

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

最佳答案

大约是这样的;

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

关于javascript - 使用 jQuery 将鼠标悬停在图像上并显示另一个图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6123398/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com