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 相关文章推荐
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
vue-axios使用详解
May 10 Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 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模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
10个php函数实用却不常见
2015/10/13 PHP
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
浅析js封装和作用域
2013/07/09 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
Python中动态创建类实例的方法
2017/03/24 Python
Python 对象中的数据类型
2017/05/13 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
Django中的forms组件实例详解
2018/11/08 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
Python requests模块实例用法
2019/02/11 Python
python常用数据重复项处理方法
2019/11/22 Python
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
食品流通安全承诺书
2014/05/22 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
医生辞职信范文
2015/03/02 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis