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. centos 安装php7

    yum安装php7 删除之前的版本 # yum remove php* rpm 安装 Php7 相应的 yum源 CentOS/RHEL 7.x: # rpm -Uvh https://dl.fedo ...

  2. MacOS下JDK6源码配置

    参考:http://www.mkyong.com/mac/how-to-download-jdk-source-code-for-mac-os-x/ 系统默认的JDK是没有源码的,据说这是因为此JDK ...

  3. Android基础之布局ConstraintLayout

    Google I/O 2016 上发布了 ConstraintLayout,据说很强大,那就一探究竟吧! gradle配置 compile 'com.android.support.constrain ...

  4. 一次性show 出所有配置

    cisco的全页打印显示配置信息的命令: #terminal length 0 #show run 华为和H3C的全页打印显示配置信息的命令: ]user-interface vty 0 4 ]scr ...

  5. Window虚拟内存管理(转)

    内存管理是操作系统非常重要的部分,处理器每一次的升级都会给内存管理方式带来巨大的变化,向早期的8086cpu的分段式管理,到后来的80x86 系列的32位cpu推出的保护模式和段页式管理.在应用程序中 ...

  6. properties 中文乱码问题的解决

    在用properties处理配置信息时,发现有时出现中文乱码的问题,后经查资料得知是由于编码不一致引起的.于是解决之. [原理解释] 我们用 API操作properties文件,如果获取的属性值是中文 ...

  7. Linux ALSA声卡驱动之一:ALSA架构简介

    声明:本博内容均由http://blog.csdn.net/droidphone原创,转载请注明出处,谢谢! 一.  概述 ALSA是Advanced Linux Sound Architecture ...

  8. jquery 报错 Uncaught TypeError: Illegal invocation

    遇到这个错误 请检查你的ajax提交方法的参数 1 参数是否都有定义 2 参数个数是否一致 3参数是否都有值(******)

  9. 用jQuery获取table中行id和td值

    <%@ page language="java" pageEncoding="UTF-8"%> <% String path = reques ...

  10. Unity 导出NavMesh (可行走区域判定) 数据给服务器使用

    cp790621656 博客专家 Unity 导出NavMesh (可行走区域判定) 数据给服务器使用 发表于2016/9/26 18:15:11  1089人阅读 分类: Unity MMO 这个 ...