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属性,第二个参数表示持续的时间,单位毫秒。

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

PHP中利用jQuery操作json格式数据,实现$_POST的数据传输和接收

PHP中利用jQuery操作json格式数据,实现$_POST的数据传输和接收 首先认识jQuery的语法格式: $("#sub").click(function(){ $.pos...

vertical-align:middle使img标签图片居中的办法

vertical-align:mddle

Jquery实现多层元素点击结果叠加效果_获取标签内容_叠加实例

1 原理,分别定义不同层标签,使用+连接号 累加获取内容 代码如下 4-4-1 *{margin:0;padding:0;} body { font-size: 13px; line-...

jquery子元素选择器、form属性选择器和实现可以左右选择的下拉菜单效果

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

jquery简单实现表单提交后的需要等待效果

简单来说就是遮罩然后加载个动画,往上有利用js手动更改html值实现缓冲动画的,比较麻烦,感觉性价比不高,毕竟谁也不会没事一直在那加载很多张这种等待动画。 主要也就是利用了position里面的fi...

WEB前端开发学习----11. JQuery 实现简单的拖拽效果

拖拽效果在网页中很常见。实现

jquery的简单实现高亮效果

实现gao'liang'xiao 新建网页 .div{   height: 100px;   width: 100px;   background: #d...

JQuery简单实现菜单的点击效果

利用JQuery简单实现菜单的点击打开和关闭

Struts2+Spring 整合成功测试案例----利用jquery+Json实现简单的Ajax的效果(二)

经过几番搜索+测试,利用jquery+Json写了个实现Ajax效果实例,批量显示数据。此数据接上节内容。   一、准备工作jar包    1.commons-beanutils-1.8.0.ja...
  • TnQin
  • TnQin
  • 2012年07月03日 19:18
  • 1520
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery--元素抖动效果的简单实现
举报原因:
原因补充:

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