需要简单的 jquery 淡入/淡出转换帮助
使用jquery，我试图让背景图像在您将鼠标悬停在背景图像上时淡入不同的图像，并在您移开鼠标时淡出。在过去的几个小时里，我尝试了无数的解决方案，但似乎找不到一个适用的解决方案。下面是我的 css
.thumbnail span {
background: url('images/portfolio.png') no-repeat;
width: 298px;
height: 160px;
position: absolute;
top: 0;
left: 0;
margin-left:-2px;
cursor: pointer;
}
.thumbnail span .rollover {
background: url('images/portfolio_vignette.png') no-repeat;
}
，这是我的 JavaScript：
<script type="text/javascript">
$(document).ready(function(){
$(".rollover").css({'opacity':'0'});
$('.thumbnail span').hover(
function() {
$(this).find('.rollover').stop().fadeTo(500, 1);
},
function() {
$(this).find('.rollover').stop().fadeTo(500, 0);
}
)
});
</script>
干杯，伙计们！
Using jquery, I am trying to get a background image to fade into a different one when you mouse over it, and fade out when you take your mouse off. I have tried countless solutions over the last few hours, and can't seem to find one that applies. Below is my css
.thumbnail span {
background: url('images/portfolio.png') no-repeat;
width: 298px;
height: 160px;
position: absolute;
top: 0;
left: 0;
margin-left:-2px;
cursor: pointer;
}
.thumbnail span .rollover {
background: url('images/portfolio_vignette.png') no-repeat;
}
and here is my JavaScript:
<script type="text/javascript">
$(document).ready(function(){
$(".rollover").css({'opacity':'0'});
$('.thumbnail span').hover(
function() {
$(this).find('.rollover').stop().fadeTo(500, 1);
},
function() {
$(this).find('.rollover').stop().fadeTo(500, 0);
}
)
});
</script>
Cheers guys!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
确保在两个图像周围放置一个
div包装器，并将悬停事件附加到其上。如果不这样做，当图像消失/出现时，您的悬停将不断触发。在这里，我只是在悬停时淡出最后一个元素，在取消悬停时淡入。当然，您可以更具体，仅对
img标签或特定 ID 进行操作。通用方法更有用，因为您不必为另一对图像再次编写代码。HTML:
jQuery:
示例: http://jsfiddle.net/jtbowden/wQkWR/
使用 div 的示例背景图片：http://jsfiddle.net/jtbowden/wQkWR/1/
Make sure to put a
divwrapper around your two images and attach the hover event to that. If you don't, your hover will continuously trigger as the image disappears/appears.Here, I simply fade the last element out when hovering, and in when un-hovering. Of course, you could be more specific and act on
imgtags only, or on specific ID's. The generic way is more useful as you never have to write the code again for another pair of images.HTML:
jQuery:
Example: http://jsfiddle.net/jtbowden/wQkWR/
Example using divs with background images: http://jsfiddle.net/jtbowden/wQkWR/1/
将您的 2 个图像完全相同地放在相同的位置，然后使用 javascript 使顶部图像淡出。这样就可以达到你想要的效果了
Put your 2 images exactly in the same position, then with javascript make the top image to fadeout. That will make the effect you want
您可以访问缩略图类来执行淡入或淡出。
$(.thumbnail).fadeIn('慢');
或
$(.thumbnail).fadeIn(700); //
淡出的毫秒数执行相反的操作
$(.thumbnail).fadeOut('fast');
或
$(.thumbnail).fadeOut(300); // 毫秒
You can access the thumbnail class to perform fade in or out.
$(.thumbnail).fadeIn('slow');
or
$(.thumbnail).fadeIn(700); // miliseconds
to fadeout do the reverse
$(.thumbnail).fadeOut('fast');
or
$(.thumbnail).fadeOut(300); // miliseconds
简化 Jeff B 的代码..
使用 jQuery 的 fadeToggle 来避免淡出和淡入的单独函数。
http:// jsfiddle.net/danielredwood/wQkWR/2/
Simplifying Jeff B's code..
Use jQuery's fadeToggle to avoid separate functions for the fade out and in.
http://jsfiddle.net/danielredwood/wQkWR/2/