jquery实现两个图片渐变切换效果的方法


Posted in Javascript onJune 25, 2015

本文实例讲述了jquery实现两个图片渐变切换效果的方法。分享给大家供大家参考。具体如下:

这段代码演示了jquery如何实现两个图片渐变切换的效果,为id=kitten的div设置一个背景图片,通过jquery对div进行淡入淡出实现两个图片的渐变切换

html代码

<div id="kitten">
  <img src="/images/kitten.jpg" alt="Kitten" />
</div>

jquery代码

$("#kitten").hover(function(){
  $(this).find("img").fadeOut();
}, function() {
  $(this).find("img").fadeIn();
});

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
科讯商业版中用到的ajax空间与分页函数
Sep 02 Javascript
js中cookie的使用详细分析
May 28 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
浅谈angular懒加载的一些坑
Aug 20 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
JS如何生成随机验证码
Mar 02 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 #Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 #Javascript
javascript实现跨域的方法汇总
Jun 25 #Javascript
浅谈JavaScript字符串拼接
Jun 25 #Javascript
javascript最基本的函数汇总
Jun 25 #Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 #Javascript
javascript中的Function.prototye.bind
Jun 25 #Javascript
You might like
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
测试你的JS的掌握程度的代码
2009/12/09 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
浅谈super-vuex使用体验
2018/06/25 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
layui时间控件选择时间范围的实现方法
2019/09/28 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python通过函数属性实现全局变量的方法
2015/05/16 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
高级文秘工作总结的自我评价
2013/09/28 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
服务明星事迹材料
2014/12/29 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL
apache基于端口创建虚拟主机的示例
2021/04/24 Servers