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. linux tcp调优

    Linux TCP Performance Tuning News Linux Performance Tuning Recommended Books Recommended Links Linux ...

  2. TortoiseSVN文件夹及文件图标不显示解决方法(兼容Window xp、window7)

    最近遇到TortoiseSVN图标(如上图:增加文件图标.文件同步完成图标等)不显示问题,网上找到的解决方法试了很多都无法真正解决,最后总结了一下,找到了终极解决方案,当然此方案也有弊端,接下来我们就 ...

  3. PHP笔试题及答案

    1.表单提交get和post有何区别? 答:get的方式是把数据在地址栏中发送,get传送的数据量较小,不能大于2KB.post传送的数据量较大,一般被默认为不受限制.但理论上,IIS4中最大量为80 ...

  4. linux命令详解2-文件管理,查看文件命令

    1. cat命令(tac) ----连接文件,并打印出来(顺序打印)与tac命令类似只不过,tac命令是逆序打印 [语法] cat [OPTION]... [FILE]... [选项] -A:显示所有 ...

  5. java算法 第七届 蓝桥杯B组(题+答案) 3.凑算式

    3.凑算式  (结果填空) B      DEFA + --- + ------- = 10     C      GHI         (如果显示有问题,可以参见[图1.jpg]) 这个算式中A~ ...

  6. SpringBoot整合ActiveMQ快速入门

    Spring Boot 具有如下特性: 为基于 Spring 的开发提供更快的入门体验 开箱即用,没有代码生成,也无需 XML 配置.同时也可以修改默认值来满足特定的需求. 提供了一些大型项目中常见的 ...

  7. 第五章 大数据平台与技术 第13讲 NoSQL数据库

    NoSQL不是不用SQL,是Not only SQL,不仅仅是结构化的查询. NoSQL兴起的原因 在Web2.0时代新浪一分钟可以发送两万条微博,苹果可以下载4.7万次应用. 数据的高并发性,同时有 ...

  8. 值得一做》关于一道暴搜BZOJ1024(EASY+)

    为什么要写这道题的DP捏? 原因很简单,因为为原来在openjudge上有一道题叫分蛋糕,有一个思路和这道题很像:“分锅”. 分锅:即为考虑计算当前情况的最优解时,把当前状态结果,分散为考虑当前状态的 ...

  9. 142. Linked List Cycle II (List; Two-Pointers)

    Given a linked list, return the node where the cycle begins. If there is no cycle, return null. Note ...

  10. ios广告封装

    代码地址:https://github.com/CoderZhuXH/XHLaunchAd