jq 抖动效果
1 .html
<div style="margin:50px auto;width:900px;overflow:visible;">
<div id="test_01" class="test"></div>
<div id="test_02" class="test"></div>
<div id="test_03" class="test"></div>
<div id="test_04" class="test"></div>
<div id="test_05" class="test"></div>
<div id="test_06" class="test"></div>
</div>
2. css
<style>.test{
margin:10px 0px;
background-color:#7DBB00;
height:150px;
border:1px #ccc solid;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 10px;
opacity:0.8;
}</style>
3. js
<script>$('.test').hover(function(){
$(this).animate({
width: 920,
height: 170,
marginLeft: -20,
opacity:0.8
}, 100 ).animate({
width: 910,
height: 160,
marginLeft: -10,
opacity:0.9
}, 100 ).animate({
width: 920,
height: 170,
marginLeft: -20,
opacity:1
}, 100 )
},function(){
$(this).stop(true).animate({
width: 900,
height: 150,
marginLeft: 0,
opacity:0.8
}, 100 );
});</script>
jq 抖动效果的更多相关文章
- CSS Shake – 摇摆摇摆!动感的 CSS 抖动效果
CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...
- iOS 为视图添加抖动效果
抖动效果在开发中比较少用到,不过有时使用了确有个很好的装逼效果,用的时候就例如一些用户错误操作之类的 效果如下,不过gif看到的效果没实际的好看 上代码 - (void)shakeAnimationF ...
- jQuery实现抖动效果
//抖动效果 //intShakes:抖动次数:intDistance:抖动左右距离:intDuration:持续时间 jQuery.fn.shake = function (intShakes, i ...
- 让DIV实现抖动效果!
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- IOS中对于一些控件的抖动效果
这两天在网上看到一个帖子讨论关于有些app 输入账密时候 错误的话会有抖动效果出现,然后自己琢磨了下如何实现,下面上代码!!! 首先 写一个UIView的分类 #import <UIKit/UI ...
- 通用的Android控件抖动效果实现
这个小程序的功能在实际的开发中会用到,比如:设置Button左右晃动,或者上下的晃动效果,下面就给出示例代码. 首先:要定义一个xml文件,命名为Shake [html] view plain cop ...
- unity3d 摄像机抖动效果 CameraShake
unity3d 摄像机抖动效果 ,利用脚本直接控制:当然也可以选择使用dotween插件,但到不至于为了使用仅一个功能,就导入了一个插件: 脚本示例: using UnityEngine; using ...
- iOS - View的抖动效果
/** * 抖动效果 * * @param view 要抖动的view */ - (void)shakeAnimationForView:(UIView *) view { CALayer *view ...
- Jquery实现的图标抖动效果
原文:http://www.webdm.cn/webcode/75de64a9-3fb4-473d-bc2c-97a0a063be79.html <!DOCTYPE html PUBLIC &q ...
随机推荐
- java父类可以强制转化成子类吗?
转自:http://blog.csdn.net/ld422586546/article/details/9707997 Java中父类强制转换成子类的原则:父类型的引用指向的是哪个子类的实例,就能转换 ...
- gradle多项目构建及依赖
上项目结构图: idea里面一个project其实相当于eclipse的一个workspace,这样一来就很好理解了,我们新建了两个module,相当于eclipse的两个项目工程 主要看配置:bui ...
- Scala 泛型类型和方法
abstract class Stack[A] { def push(x: A): Stack[A] = new NonEmptyStack[A](x, this) def isEmpty: Bool ...
- java使用poi解析或处理excel的时候,如何防止数字变成科学计数法的形式和其他常见Excel中数据转换问题
当使用POI处理excel的时候,遇到了比较长的数字,虽然excel里面设置该单元格是文本类型的,但是POI的cell的类型就会变成数字类型. 而且无论数字是否小数,使用cell.getNumberi ...
- VMware Fusion 5虚拟机怎样与MAC共享文件
刚刚在Macbook Pro中安装了VMware Fusion 5虚拟机,虚拟机里装了Windows7,在虚拟机的设置里也设置了共享MAC的几个文件夹,以便与MAC交换文件,但是在Windows7里怎 ...
- vuls漏洞扫描工具
Vuls 是一款适用于 Linux/FreeBSD 的漏洞扫描程序,无代理,采用 Go 语言编写,对于系统管理员来说,每天必须执行安全漏洞分析和软件更新都是一个负担. 为避免生产环境宕机,系统管理员通 ...
- 04Add.ashx(新增班级)
04Add.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea ...
- Ensure Indexes Fit in RAM
Ensure Indexes Fit in RAM — MongoDB Manual https://docs.mongodb.com/manual/tutorial/ensure-indexes-f ...
- stark - 分页、search、actions
一.分页 效果图 知识点 1.分页 {{ showlist.pagination.page_html|safe }} 2.page.py class Pagination(object): def _ ...
- Day05 xml详解
day05总结 今日内容 XML语法 XML约束之DTD XML解析器介绍 XML解析之JAXP( DOM.SAX ) DOM4J Schema 一.XML语法 XML概述 1 什么是XML ...