JQuery实现鼠标移动图片显示描述层的方法


Posted in Javascript onJune 25, 2015

本文实例讲述了JQuery实现鼠标移动图片显示描述层的方法。分享给大家供大家参考。具体如下:

这里可结合 JQuery easing 的动画来配合使用。

主要代码如下:

$(".item").hover(
function()
{
//$(this).children("img").stop().animate({opacity: 0.8}, 700, "easeInSine");
$(this).children("div.title").stop().animate({top: 0}, 700, "easeOutBounce");
$(this).children("div.desc").stop().animate({bottom: 0}, 700, "easeOutBounce");
},
function(){
//$(this).children("img").stop().animate({opacity: 1}, 700);
$(this).children("div.title").stop().animate({top: -60}, 500);
$(this).children("div.desc").stop().animate({bottom: -40}, 400);
}
);

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

Javascript 相关文章推荐
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
jquery实现table鼠标经过变色代码
Sep 25 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
JavaScript中Function详解
Feb 27 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
Node.js中的process.nextTick使用实例
Jun 25 #Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 #Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 #Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 #Javascript
深入理解JavaScript编程中的原型概念
Jun 25 #Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 #Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 #Javascript
You might like
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
PDO::_construct讲解
2019/01/27 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
屏蔽script注入小例子
2013/11/12 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:46]新英雄登场
2019/09/10 DOTA
Python和C/C++交互的几种方法总结
2017/05/11 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
介绍一下linux的文件系统
2012/03/20 面试题
银行实习的自我鉴定
2013/12/10 职场文书
工作中个人的自我评价
2013/12/31 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
劳动竞赛口号
2014/06/16 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python
开发微信小程序之WXSS样式教程
2022/04/18 HTML / CSS