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 Jcrop插件实现图片选取功能
Nov 23 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
javascript实现去除HTML标签的方法
Dec 26 Javascript
巧用canvas
Jan 21 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
js实现随机点名器精简版
Jun 29 Javascript
vue实现自定义多选按钮
Jul 16 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 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
摘自启点的main.js
2008/04/20 Javascript
用JQuery调用Session的实现代码
2010/10/29 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
vue.js的安装方法
2017/05/12 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
vue 权限认证token的实现方法
2018/07/17 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
django项目搭建与Session使用详解
2018/10/10 Python
Numpy之reshape()使用详解
2019/12/26 Python
python实现与redis交互操作详解
2020/04/21 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
应届生幼儿园求职信
2013/11/12 职场文书
年会活动策划方案
2014/01/23 职场文书
关于廉洁的广播稿
2014/01/30 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
员工年度工作总结2015
2015/05/18 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL