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之学会吝啬 精简代码
Apr 25 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
js实现移动端轮播图
Dec 21 Javascript
elementUI select组件使用及注意事项详解
May 29 Javascript
vue 扩展现有组件的操作
Aug 14 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中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
php mssql 数据库分页SQL语句
2008/12/16 PHP
php树型类实例
2014/12/05 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
Javascript - HTML的request类
2006/07/15 Javascript
Prototype使用指南之ajax
2007/01/10 Javascript
jquery.ui.draggable中文文档
2009/11/24 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
js性能优化技巧
2015/11/29 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
python使用PyFetion来发送短信的例子
2014/04/22 Python
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
Python实现分割文件及合并文件的方法
2015/07/10 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
Python命令行解析模块详解
2018/02/01 Python
对python:print打印时加u的含义详解
2018/12/15 Python
Python中的heapq模块源码详析
2019/01/08 Python
django-allauth入门学习和使用详解
2019/07/03 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
详解python中各种文件打开模式
2020/01/19 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
怎样有效的进行自我评价
2013/10/06 职场文书
历史专业大学生职业生涯规划书
2014/03/13 职场文书
企业晚会策划方案
2014/05/29 职场文书
微电影大赛策划方案
2014/06/05 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA