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 相关文章推荐
一个XML格式数据转换为图表的例子
Feb 09 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
react build 后打包发布总结
Aug 24 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 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 登录记住密码实现思路
2013/05/07 PHP
php二维数组排序详解
2013/11/06 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
PHP PDO操作总结
2014/11/17 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
python基础教程之五种数据类型详解
2017/01/12 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
Pyqt5 基本界面组件之inputDialog的使用
2019/06/25 Python
python面试题之列表声明实例分析
2019/07/08 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
.NET程序员的几道面试题
2012/06/01 面试题
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
高职教师岗位职责
2013/12/24 职场文书
中学生自我鉴定
2014/02/04 职场文书
学校党员干部承诺书
2015/05/04 职场文书
故意伤害辩护词
2015/05/21 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书