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代码
Dec 15 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
layui的table中显示图片方法
Aug 17 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
微信小程序实现锚点跳转
Nov 23 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
escape unescape的php下的实现方法
2007/04/27 PHP
ie6 动态缩略图不显示的原因
2009/06/21 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
浅析php学习的路线图
2013/07/10 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
js实现简单模态框实例
2018/11/16 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
python实现随机密码字典生成器示例
2014/04/09 Python
Python获取当前路径实现代码
2017/05/08 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
2014年维稳工作总结
2014/11/18 职场文书
小学生作文批改评语
2014/12/25 职场文书
婚礼迎宾词大全
2015/08/10 职场文书
《火烧云》教学反思
2016/02/23 职场文书