jQuery 淡出一个图像到另一个图像的实现代码


Posted in Javascript onJune 12, 2013

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学习

Javascript 相关文章推荐
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 #Javascript
Jquery 表单验证类介绍与实例
Jun 09 #Javascript
js调用后台servlet方法实例
Jun 09 #Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 #Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 #Javascript
ScrollDown的基本操作示例
Jun 09 #Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 #Javascript
You might like
PHP加密解密字符串汇总
2015/04/26 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
python中mechanize库的简单使用示例
2014/01/10 Python
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
python正则表达式re之compile函数解析
2017/10/25 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
python批量赋值操作实例
2018/10/22 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
linux面试题参考答案(8)
2016/04/19 面试题
Lucene推荐的分页方式是什么?
2015/12/07 面试题
晨会主持词
2014/03/17 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
文明礼貌主题班会
2015/08/14 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js