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 相关文章推荐
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
jquery实现上传图片功能
Jun 29 jQuery
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
JS 图片缩放效果代码
2010/06/09 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
ECMAScript6--解构
2017/03/30 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
详解Python字符串对象的实现
2015/12/24 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
指针和引用有什么区别
2013/01/13 面试题
Unix如何添加新的用户
2014/08/20 面试题
道德之星事迹材料
2014/05/03 职场文书
授权委托书格式范文
2014/08/02 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis