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 相关文章推荐
JS小框架 fly javascript framework
Nov 26 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
jquery禁用右键示例
Apr 28 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
JavaScript提升机制Hoisting详解
Oct 23 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
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 cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
python学习 流程控制语句详解
2016/06/01 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
通过自学python能找到工作吗
2020/06/21 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
大学共青团员个人自我评价
2014/04/16 职场文书
初三开学计划书
2014/04/27 职场文书
民事调解协议书
2016/03/21 职场文书
用python修改excel表某一列内容的操作方法
2021/06/11 Python
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript
Python开发简易五子棋小游戏
2022/05/02 Python
spring boot实现文件上传
2022/08/14 Java/Android