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. nginx 1.12 配置解析php

    server { listen 80; server_name foo.com; root /path; index index.html index.htm index.php; location ...

  2. JDBC读取配置文件

    Properties prop = new Properties(); prop.load(this.class.getClassLoader().getResourceAsStream(" ...

  3. 数据库,使用Druid 加密数据库密码

    首先我们得下载一个druid-1.0.16.jar的包 其次键入命令 java -cp druid-1.0.16.jar com.alibaba.druid.filter.config.ConfigT ...

  4. 通过devtools在centos系统中启用高版本的gcc

    C++11出来好久了,现在还是使用c++03的,需要在centos6.6的系统上实现gcc的升级,又不想自己编译代码. 于是选用了devtoolsset系列,安装脚本如下 安装脚本如下 functio ...

  5. Proxmox VE 设置备忘

    现在PROXMOX 虚拟机一共两个(使用的是N3700 cpu的一个小机器主要为了省电.) 一个是ROS,经过折腾,IK8速度还不错就是资源占用比较大特比下载数据大时对CPU占用很大:OpenWRT不 ...

  6. Kafka总结的一张图

  7. 【UVA10079 训练指南】收集者的难题【最大流】

    题意: Bob和他的朋友从糖果包装里手机贴纸.这些朋友每人手里都有一些(可能有重复的)贴纸,并且只跟别人交换他所没有的贴纸,贴纸总是一对一交换. Bob比这些朋友更聪明,因为他意识到只跟别人交换自己没 ...

  8. js-textarea文本换行符处理,Java后端以及js前端如何处理

    方法一:后台处理 TextArea的换行符处理 TextArea文本转换为Html:写入数据库时使用 js获取了textArea的文本内容之后,器内容含有换行,空格,制表符之类的字符,但是js字符串不 ...

  9. 使用CocoaPods卡在了"pod setup"界面的解决办法

      http://blog.csdn.net/samoy/article/details/51956799   有时候,我们在执行pod install或pod search命令时,会在终端偶现卡在’ ...

  10. Jenkins中Jelly邮件模板的配置

    [链接]Jenkins中Jelly邮件模板的配置http://blog.csdn.net/hwhua1986/article/details/47975237