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 相关文章推荐
javascript removeChild 使用注意事项
Apr 11 Javascript
基于jquery的loading 加载提示效果实现代码
Sep 01 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
javascript中this用法实例详解
Apr 06 Javascript
vue 插值 v-once,v-text, v-html详解
Jan 19 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
AngularJs中$cookies简单用法分析
May 30 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中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
python RSA加密的示例
2020/12/09 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
违反工作纪律检讨书
2014/02/15 职场文书
暑期研修感言
2014/02/17 职场文书
校园环保建议书
2014/05/14 职场文书
节能环保标语
2014/06/12 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
redis限流的实际应用
2021/04/24 Redis