Home>

jquery flashing text prompt,Imitation qq head flashing prompts,Can be used for error prompts or other situations that attract the user's attention.

shake (ele, cls, times)

ele:jquery object [object] the element to flash

cls:class name [string] the flashing class

times:number [number] flash several times

Note that you must call jquery1.4.2 and above,Otherwise, the bottom corner of the page will prompt an error.

The screenshot of the running effect is as follows:

The online demo address is as follows:

The specific code is as follows:

<! Doctype html>
<html>
<head>
<title>qsl community flashing tips</title>
<style>
 * {margin:0;padding:0;}
 body {background:#fff;font-family:arial, helvetica, sans-serif;background:#f9f9f9;font-size:14px;color:#333;}
 .main {width:600px;background:#fff;margin:0 auto;padding:20px 0;border:solid #ddd;border-width:0 1px;min-height:800px;}
 .box {width:240px;height:26px;line-height:26px;background:#f0f0f0;border:1px solid #ddd;text-align:center;font-size:14px;margin:20px auto;}
 input.box {width:240px;font-weight:900;color:#999;display:block;background:#fff;text-align:left;}
 .red {border:1px solid #d00;background:#ffe9e8;color:#d00;}
 input.red {background:#ffe9e8;}
 #box1 {cursor:pointer;}
 .des {margin:0 20px;padding:6px;line-height:20px;border:1px solid #ccc;color:#555;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script>
 function shake (ele, cls, times) {
   var i=0, t=false, o=ele.attr ("class") + "", c=", times=times || 2;
   if (t) return;
   t=setinterval (function () {
    i ++;
    c=i%2?o + cls:o;
    ele.attr ("class", c);
    if (i == 2 * times) {
     clearinterval (t);
     ele.removeclass (cls);
     }
    }, 200);
   };
 $(function () {
  //domready flashes
  shake ($("#box"), "red", 3);
  //click flash
  $("#box1"). bind ({
   click:function () {
    shake ($(this), "red", 3);
    return false;
    }
   });
  //Failed to flash mail verification
  $("#mail"). blur (
   function () {
     if (!/^ \ w + ([-+.] \ w +) *@\ w + ([-.] \ w +) * \. \ w + ([-.] \ w +) * /. test ($(this) .val ())) {
      shake ($(this), "red", 3);
     }
    }
   );
  });
</script>
</head>
 <body>
 <div>
 <p>flashing tips,Can be used for error prompts or other situations that attract the user's attention<br>
 shake (ele, cls, times)<br>
 ele:jquery object [object] the element to flash<br>
 cls:class name [string] flashing class<br>
 times:number [number] flash several times
 </p>
<div>flickering when opened</div><div>flickering when clicked</div>
<input type="email" placeholder="flash if not email address" />
</div>
</body>
</html>
  • Previous jQuery dynamic append page data and event delegation
  • Next Tween algorithm implemented in JavaScript and buffer effect example code