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 相关文章推荐
jQuery 中关于CSS操作部分使用说明
Jun 10 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
jQuery实现冻结表头的方法
Mar 09 Javascript
js改变Iframe中Src的方法
May 05 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
node运行js获得输出的三种方式示例详解
Jul 02 Javascript
vue使用screenfull插件实现全屏功能
Sep 17 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
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
微信红包随机生成算法php版
2016/07/21 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
深入理解python中的闭包和装饰器
2016/06/12 Python
利用Python破解验证码实例详解
2016/12/08 Python
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
python同时替换多个字符串方法示例
2019/09/17 Python
深入了解python列表(LIST)
2020/06/08 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
小学六年级学生评语
2014/04/22 职场文书
英语教师求职信范文
2015/03/20 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL