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 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
js 幻灯片的实现
Dec 06 Javascript
跨浏览器的事件对象介绍
Jun 27 Javascript
js倒计时小程序
Nov 05 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
JavaScript文档加载模式以及元素获取
Jul 28 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下通过file_get_contents的代理使用方法
2011/02/16 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
Javascript & DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
python3抓取中文网页的方法
2015/07/28 Python
python文件与目录操作实例详解
2016/02/22 Python
python 性能提升的几种方法
2016/07/15 Python
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
python模块导入的细节详解
2018/12/10 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
农业大学毕业生的个人自我评价
2013/10/11 职场文书
产品生产计划书
2014/05/07 职场文书
五水共治捐款倡议书
2014/05/14 职场文书
党员四风剖析材料
2014/08/27 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
《藏戏》教学反思
2016/02/23 职场文书
Mysql中mvcc各场景理解应用
2022/08/05 MySQL