`
xiaomiya
  • 浏览: 127448 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

jquery 实现文字闪动效果

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);
					}
				}
			);

 

3
顶
1
踩
分享到：
| jquery中each和push详细介绍以及ajax的简单 ...
评论
2 楼 xiaomiya 2014-06-05  
mfkvfn 写道
不什么不用
$('.box').fadeIn().fadeOut().fadeIn().fadeOut().fadeIn()

这都可以？给完整的例子瞧瞧学习学习
1 楼 mfkvfn 2014-06-05  
不什么不用
$('.box').fadeIn().fadeOut().fadeIn().fadeOut().fadeIn()
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics