jQuery--元素抖动效果的简单实现

原创 2015年11月21日 15:48:46

效果:验证错误时,元素左右抖动
抖动效果图

实现步骤:

1.导入:jquery-1.11.3.min.js

 <script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/jquery-1.11.3.min.js"></script>

2.被抖动元素

<div id="login-err" class="login-err">请输入正确的帐号或密码</div>
//样式
.login-err {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    border-radius: 4px;
    background: #ffeaea none repeat scroll 0 0;
    border: 1px solid #e5c3c4;
    color: #b94a48;
    line-height: 38px;
}

3.抖动函数

    function shake(o){
        var $panel = $("#"+o);
        box_left = 0;
        //box_left = $panel.css('left');
        //box_left = ($(window).width() -  $panel.width()) / 2;
        $panel.css({'left': box_left,'position':'relative'});
        for(var i=1; 4>=i; i++){
            $panel.animate({left:box_left-(20-5*i)},30);
            $panel.animate({left:box_left+(20-5*i)},30);
        }
    }

4.调用函数

shake("login-err");

已经是全部了
说明:关键就是抖动函数,需要注意的是,被注释那里是根据浏览器可视窗口的宽度来调节元素位置的,所以抖动会受到浏览器可视窗口的大小影响,改进后用相对位置定位元素,问题得到解决。
更改元素样式为相对定位,position:relative;,然后利用letf属性来调节位置,因此,left:20会向元素的 LEFT 位置添加 20 像素。
animate为jQuery包装集操作函数,第一个参数调节left属性,第二个参数表示持续的时间,单位毫秒。

版权声明:本文为博主原创文章,未经博主允许不得转载。

jquery 实现抖动效果

jquery实现抖动效果
  • u011072139
  • u011072139
  • 2017年04月17日 11:11
  • 6376

如何通过JS实现简单抖动效果

代码如下: Title #div1 { width: 100px; height: 100px; position: absolute; left: 400px; top: 200px; ...
  • hj7jay
  • hj7jay
  • 2017年06月01日 10:11
  • 766

jQuery实现图片震动效果jquery博客右侧广告效果

  • 2012年11月07日 15:06
  • 10KB
  • 下载

文字的抖动提示效果

前言 应用开发中,常常需要与用户有一个交互过程,好的交互设计,能给用户带来更便利的操作使用,和更好的交互体验,也能为我们的应用加分。比如验证码输入密码输入的结果提示,为了能够及时提示用户主而且不需要另...
  • Fight_0513
  • Fight_0513
  • 2017年09月20日 15:21
  • 211

Unity教程之-Unity3d实现屏幕抖动效果

很多游戏玩家游戏死亡时一般都需要屏幕抖一下下或者屏幕变灰。为了在unity3d中实现这个特效,百度了下相关写法,发现方法很多~~~,找来找去,找到个简单粗暴地,啥都不需要,通过Camera Viewp...
  • andyhebear
  • andyhebear
  • 2016年01月08日 11:57
  • 523

hover效果加边框不抖动

前两天遇到一个hover效果给整个div加边框的问题。 html 如下 ...
  • u012337009
  • u012337009
  • 2015年07月19日 08:28
  • 2856

android控件实现抖动的效果

 android控件实现抖动的效果
  • u014355029
  • u014355029
  • 2014年04月18日 16:29
  • 1689

Android控件抖动效果

应用场景: 在Android的开发过程,为了给用户提供一种明了的提醒效果,如登录时,密码未填写;查询操作时,未填写查询条件信息。使密码EditView与查询Button,出现抖动效果,以提醒用户为填...
  • ma_hoking
  • ma_hoking
  • 2014年05月06日 20:29
  • 3159

Winform实现窗体抖动的效果代码

 Winform实现窗体抖动的效果代码,我们都知道,在目前的即时通讯工具中都有窗体抖动的功能,这也是为了及时通知对方而设立的功能,今天我们就用Winform的C#版来实现窗体拌动的功能!思路:间隔一定...
  • yja886
  • yja886
  • 2010年11月09日 06:38
  • 2090

css3 的shake效果,css3抖动窗口 大部分手机浏览器都支持

无标题文档 $(function(){ $("ul li").click(function(){ $("#btn").removeClass().addClass("shake"); v...
  • kongjiea
  • kongjiea
  • 2014年01月02日 11:49
  • 11266
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery--元素抖动效果的简单实现
举报原因:
原因补充:

(最多只允许输入30个字)