jQuery 淡出一个图像到另一个图像的实现代码
更新时间：2013年06月12日 12:34:14 作者：
这篇文章主要介绍了jquery的hover事件实现两个图片的淡出切换效果，需要的朋友可以参考下
jQuery 淡出一张图片到另一张图片，例如有下边的 html：
<div class="fade">
<img src="1.jpg" />
</div>
首先，确保 div 的大小和图片大小一样，这个 div 有另一个背景图，如下：
css代码：
.fade
{
background-image:url('images/2.jpg');
width:300px;
height:225px;
}
jQuery 代码如下:
$(document).ready(function () {
$(".fade").hover(function () {
$(this).find("img").stop(true, true).animate({ opacity: 0 }, 500);
}, function () {
$(this).find("img").stop(true, true).animate({ opacity: 1 }, 500);
});
});
完整实现代码：
<div class="fade"><img src="1.jpg" /></div>
<style type="text/css">
.fade
{
background-image:url('2.jpg');
width:300px;
height:225px;
margin:0 auto 15px;
}</style>
<script type="text/javascript">
$(document).ready(function () {
$(".fade").hover(function () {
$(this).find("img").stop(true, true).animate({ opacity: 0 }, 500);
}, function () {
$(this).find("img").stop(true, true).animate({ opacity: 1 }, 500);
});
});
</script>
作者：jQuery学习
复制代码 代码如下:
<div class="fade">
<img src="1.jpg" />
</div>
首先，确保 div 的大小和图片大小一样，这个 div 有另一个背景图，如下：
css代码：
复制代码 代码如下:
.fade
{
background-image:url('images/2.jpg');
width:300px;
height:225px;
}
jQuery 代码如下:
复制代码 代码如下:
$(document).ready(function () {
$(".fade").hover(function () {
$(this).find("img").stop(true, true).animate({ opacity: 0 }, 500);
}, function () {
$(this).find("img").stop(true, true).animate({ opacity: 1 }, 500);
});
});
完整实现代码：
复制代码 代码如下:
<div class="fade"><img src="1.jpg" /></div>
<style type="text/css">
.fade
{
background-image:url('2.jpg');
width:300px;
height:225px;
margin:0 auto 15px;
}</style>
<script type="text/javascript">
$(document).ready(function () {
$(".fade").hover(function () {
$(this).find("img").stop(true, true).animate({ opacity: 0 }, 500);
}, function () {
$(this).find("img").stop(true, true).animate({ opacity: 1 }, 500);
});
});
</script>
作者：jQuery学习
相关文章
如果希望取到tagName后再进行判断，可以使用$(element).is()来实现2014-05-05
jQuery获得包含margin的outerWidth和outerHeight的方法
这篇文章主要介绍了jQuery获得包含margin的outerWidth和outerHeight的方法,涉及jQuery中outerWidth及outerHeight方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
在 jQuery 中，实际注册的事件处理函数是一个匿名的闭包函数，这个函数最终都是通过调用 jQuery.event.handle 进行处理的。2010-08-08
这篇文章主要介绍了jQuery+PHP+Ajax实现动态数字统计展示功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
jQuery pageSlide 是一个可以让网页出现滚动效果的jQuery插件，它可以控制一个隐藏页面的显示和关闭。具体来说，就是当前页占一个完整页面，隐藏页是看不到的，你设置一个控制的地方，点击该控制时触发事件，隐藏的页面就滑出来，再次点击隐藏页面以外的地方，它就又关闭2015-04-04
本文给大家汇总了下在jQuery中判断对象是否存在的方法以及用原生javascript实现的方法，有相同需求的小伙伴可以来参考下。2016-02-02
jquery插件如何使用 jQuery操作Cookie插件使用介绍
本文将介绍jQuery如何操作Cookie插件,需要了解的朋友可以参考下2012-12-12
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
这篇文章主要是对JS和JQUERY获取页面大小,滚动条位置,元素位置的示例代码进行了介绍。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了jQuery实现frame之间互通的方法,结合实例形式分析了jQuery实现frame父子框架之间的调用操作实现方法,需要的朋友可以参考下2017-06-06
这篇文章给大家总结了使用jq获取元素值的常见写法,文中给大家介绍了详细的代码示例,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2023-12-12
最新评论