jQuery.fn.shake = function (intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, intDuration /*Time duration*/) {
this.each(function () {
var jqNode = $(this);
jqNode.css({ position: 'relative' });
for (var x = 1; x <= intShakes; x++) {
jqNode.animate({ left: (intDistance * -1) }, (((intDuration / intShakes) / 4)))
.animate({ left: intDistance }, ((intDuration / intShakes) / 2))
.animate({ left: 0 }, (((intDuration / intShakes) / 4)));
}
});
return this;
}

调用方法:

$("抖动元素").shake(次数, 距离, 持续时间);

$("#userName").shake(2, 10, 400);

转载

jquery 实现抖动效果的更多相关文章

  1. jQuery实现抖动效果

    //抖动效果 //intShakes:抖动次数:intDistance:抖动左右距离:intDuration:持续时间 jQuery.fn.shake = function (intShakes, i ...

  2. Jquery实现的图标抖动效果

    原文:http://www.webdm.cn/webcode/75de64a9-3fb4-473d-bc2c-97a0a063be79.html <!DOCTYPE html PUBLIC &q ...

  3. CSS Shake – 摇摆摇摆!动感的 CSS 抖动效果

    CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...

  4. jQuery实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

  5. iOS 为视图添加抖动效果

    抖动效果在开发中比较少用到,不过有时使用了确有个很好的装逼效果,用的时候就例如一些用户错误操作之类的 效果如下,不过gif看到的效果没实际的好看 上代码 - (void)shakeAnimationF ...

  6. jquery左右滑动效果的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

  8. JQuery实现广告效果(滚动切换)

    JQuery实现广告效果(滚动切换)   Html+css 效果如上图 代码: <!DOCTYPE html> <html> <head lang="en&qu ...

  9. 让DIV实现抖动效果!

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

随机推荐

  1. 第二章ARP——地址解析协议

    本章我们要讨论的问题是只对 T C P / I P协议簇有意义的I P地址.数据链路如以太网或令牌环网都有自己的寻址机制(常常为 48 bit地址),这是使用数据链路的任何网络层都必须遵从的.一个网络 ...

  2. C# 判断字体是否存在以及安装

        1. 字体安装 在实际开发项目中,需要在客户端安装字体,一种是通过代码将字体文件复制到系统FONT目录即可,另一种通过安装文件实现,至于其他方式还未知晓. 1.1 软安装 public cla ...

  3. jsp table td自动换行

    <TABLE style="word-wrap: break-word; word-break: break-all;">

  4. call和callvirt

    call以非虚方式调用虚函数. callvirt以虚方式调用虚函数,调用的时候会判断真正引用的对象,调用该类型的

  5. book pile SGU - 271

    有n本书从上到下摞在一起,有两种操作.ADD(C)表示把一本新书C放到这一摞书的最顶上,ROTATE表示将前K本书进行反转.在一系列操作后输出最后书的顺序 分析: 当时听别人讲这个题的时候很懵逼,后来 ...

  6. 135. Candy(Array; Greedy)

    There are N children standing in a line. Each child is assigned a rating value. You are giving candi ...

  7. Spring Data JPA 参考指南 中文版

    附下载地址:https://www.gitbook.com/book/ityouknow/spring-data-jpa-reference-documentation/details

  8. 5-SOM神经网络

    https://blog.csdn.net/gavinlyy/article/details/8302814 https://blog.csdn.net/u011314012/article/deta ...

  9. SSM项目与Shiro项目的整合(单体式项目)

    1.项目的包结构: 2.jar包,配置文件及工具类 2.1pom.xml的配置 <?xml version="1.0" encoding="UTF-8"? ...

  10. Mysql中自定义函数编程

    1.语法 1.1 新建函数 Create function function_name(参数列表) returns 返回值类型 函数体 (1)函数名,应该合法的标识符,并且不应该与已有的关键字冲突. ...