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 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
Sep 27 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 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
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
实例讲解React 组件
2020/07/07 Javascript
使用Python绘制图表大全总结
2017/02/11 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
PyCharm代码格式调整方法
2018/05/23 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
python中取绝对值简单方法总结
2020/07/24 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
水果花束:Fruit Bouquets
2017/12/20 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
学生操行评语大全
2014/04/24 职场文书
数字化校园建设方案
2014/05/03 职场文书
2015年公务员工作总结
2015/04/24 职场文书
信用卡工作证明范本
2015/06/19 职场文书