jquery 实现文字闪动效果

有个项目,之前添加记事成功是弹出一个提示框提示,添加成功,产品经理觉得这样不是很友好,但是不提示又不知道是不是添加成功,又不知道明确知道当前添加的是哪一条,所以:想让添加的当条信息闪动几下,然后停止。就OK

下面就来说说实现的原理:

1,先要获取到最新一条记事的pid,这个pid可以是后台给你接口中返回的值。

2,在添加成功后来闪动这条记事,

3,闪动的方法可以写到函数里,直接调用。

4,有闪动就要有定时器,开启定时器就要关闭定时器。

下面上代码:

代码只是写了一个例子,,,

在页面打开的时候闪动,,

<!DOCTYPE HTML>
<html>
<head>
<title>闪动提示</title>
<style> 
  *{ margin:0; padding:0;}
  
  .box{color: #000}
 
  .red{color:#d00;}
 </style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script> 
  function shake(element,className,times){
      var i = 0,
          t = false ,
          o = element.attr("class"),
          c = "",
          times = times||2;

      if(t) return;

      t = setInterval(function(){
        i++;
        c = i%2 ? o + ' ' + className : o;
        element.attr("class",c);

        if(i==2*times){
          clearInterval(t);
          element.removeClass(className);
          }
        },200);

      };
      
      
  $(function(){
    //domready 就闪动
    shake($(".box"),"red",3);
    });   
</script>
</head>
 <body>
<div class="box">打开就闪动</div>
</body>
</html>

 下面在提示两种点击闪动,和不同校验闪动,如form表单输入错误的闪动

//点击闪动
		$("#box1").bind({
			click:function(){
				shake($(this),"red",3);
				return false;
				}
			});
		//通不过mail校验闪动
		$("#mail").blur(
			function(){
				 if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test($(this).val())) {
						shake($(this),"red",3);
					}
				}
			);