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. C++ primer plus

    给cout指针,默认打印指针地址,但如果指针的类型的char*,将打印指向的字符串,如果要显示的是字符串的地址,将指针强制转换为另一种类型 char* animal cout << ani ...

  2. java设计模式之责任链模式(Chain of Responsibility)

    转自:http://www.cnblogs.com/java-my-life/archive/2012/05/28/2516865.html 在阎宏博士的<JAVA与模式>一书中开头是这样 ...

  3. STL - Vector迭代器简单应用之计算元素和

    Description 用vector向量容器装入10个整数,然后,使用迭代器iterator和accumulate算法统计出这10个元素的和 Solution #include "stda ...

  4. BUI 框架使用指南

    指南说明:只适用于对框架的剥离 如果不需要剥离则原来的东西直接粘贴就行 在主界面中使用时需要加入一下引用bui.js jquery.js config.js 末尾的文件 BUI.use(位置1, fu ...

  5. 选择性导出excel表中内容

    package com.huawei.utils; import java.io.FileNotFoundException;import java.io.FileOutputStream;impor ...

  6. Android基础之sqlite 数据库简单操作

    尽管很简单,但是也存下来,以后直接粘过去就能用了. public class DBHelper extends SQLiteOpenHelper {      private static final ...

  7. 安装运行 rovio odometry

    https://github.com/ethz-asl/rovio https://github.com/ethz-asl/kindr 1. 新建catkinworkspace mkdir -p ~/ ...

  8. C#在控制台输出异常所在的行数

    对于异常,我们经常用try-catch语句来处理,一种常见的方式是在catch语句块用MessageBox.Show("异常")这种弹窗的方式来报告异常.但是有些时候,有些异常发生 ...

  9. 快速搭建Wordpress

    1. 下载:ZentaoPMS作为Mysql Apach Php的基础环境: 2. 下载:Wordpress安装包: 3. 将Wordpress解压,放置于ZentaoPMS的Xampp的htdocs ...

  10. Boost::split用法详解

    工程中使用boost库:(设定vs2010环境)在Library files加上 D:\boost\boost_1_46_0\bin\vc10\lib在Include files加上 D:\boost ...