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子元素选择器、form属性选择器和实现可以左右选择的下拉菜单效果

1、:nth-child(index/even/odd/equation) 用法: $(”ul li:nth-child(2)”)   返回值  集合元素       说明: 匹配其父元素下的第...

用jquery实现简单的表单验证效果

看了《锋利的jquery》一书,练习了下期中的一个用jquery写表单验证的例子。       效果如图:       总结:        这是个比较简单的表单验证,主要验证了表单中的用户名和邮...

jquery实现简单的拖拽效果,兼容所有浏览器(一)

最近发现web网页的拖拽效果,个人觉得是一种不错的用户体验,抽空研究了一下,原理还蛮简单的,下面贴一下我写的一个简单拖拽jquery自定义函数。          jquery代码:fun.js ...

[原创+源码]超简单:基于jQuery实现的选项卡(滑动门)效果

上篇文章给大家详细的介绍了,如何使用jQuery实现弹出各种窗口效果,引起了很多朋友们得反响,今天再次给大家奉献一篇的新的基于jQuery实现的 “滑动门”(跟随鼠标滑动滑动的tab选项卡)效果,希望...

css3和jQuery实现一个简单的标签页效果

主要用css3另外一种jQuery思路方法来实现标签页的切换效果,主要用css3来实现一些渐变,阴影和圆角效果,    css代码如下:        body{width: 600px;...

jquery,scss实现简单的手风琴效果

jquery,scss实现简单的手风琴效果首先页面引用jquery,基本的css,之后开始对页面进行整体的布局,首先一个大的div作为容器并且设置容器的大小,之后采用ul li的形式并且要设置为浮动f...

利用jquery的attr方法一行代码实现的简单的图片切换效果

1.利用jquery的attr方法实现如下的简单的图片切换效果 代码如下: 图片 /* intro */ .intro { width:470px;...

JQuery实现的简单标签选项卡效果

jQuery实现的标签选项卡效果 ul,li { list-style:none; padding:0; marg...
  • deron7
  • deron7
  • 2011-12-10 20:28
  • 3142

[原创+源码]超简单:基于jQuery实现的选项卡(滑动门)效果

上篇文章给大家详细的介绍了,如何使用jQuery实现弹出各种窗口效果,引起了很多朋友们得反响,今天再次给大家奉献一篇的新的基于jQuery实现的 “滑动门”(跟随鼠标滑动滑动的tab选项卡)效果,希望...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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