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效率调优经验
Jun 04 Javascript
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
javascript实现最长公共子序列实例代码
Feb 05 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
让mocha支持ES6模块的方法实现
Jan 14 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 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 一个页面执行时间类代码
2010/03/05 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
python中readline判断文件读取结束的方法
2014/11/08 Python
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
python实现求最长回文子串长度
2018/01/22 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
小学教研工作总结2015
2015/05/13 职场文书
力克胡哲观后感
2015/06/10 职场文书
如何拟写通知正文?
2019/04/02 职场文书
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js