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 相关文章推荐
20个最新的jQuery插件
Jan 13 Javascript
解读JavaScript中 For, While与递归的用法
May 07 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
JavaScript函数模式详解
Nov 07 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
php下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
php常见的魔术方法详解
2014/12/25 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
jquery 查找新建元素代码
2010/07/06 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
浅谈Python爬虫基本套路
2019/03/25 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
不用游标的SQL语句有哪些
2012/09/07 面试题
研讨会主持词
2014/04/02 职场文书
写得不错的求职信范文
2014/07/11 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
归元寺导游词
2015/02/06 职场文书
2015教师年度考核评语
2015/03/25 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis
MySQL 十大常用字符串函数详解
2021/06/30 MySQL
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers