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 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
node.js文件上传处理示例
Oct 27 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
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
一个ubbcode的函数,速度很快.
2006/10/09 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
php实现两个数组相加的方法
2015/02/17 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
python实现简单购物商城
2016/05/21 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
python-numpy-指数分布实例详解
2019/12/07 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
附答案的Java面试题
2012/11/19 面试题
数字化校园建设方案
2014/05/03 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
借款民事起诉状范文
2015/05/19 职场文书
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers