Home > Article > Web Front-end > How to use jquery to achieve flashing text effect
How to use jquery to achieve flashing text effect
- coldplay.xixiOriginal
- 2020-12-07 10:40:362504browse
How to use jquery to achieve the flashing text effect: first get the pid of the latest note, and flash the note after adding it successfully; then the flashing method can be written into the function and called directly; finally If there is flashing, there must be a timer. Just turn on the timer.
The operating environment of this tutorial: windows7 system, jquery3.2.1 version, Dell G3 computer.
Recommended: jquery video tutorial
How to use jquery to achieve the flashing text effect:
1, first obtain The pid of the latest note. This pid can be the value returned by the interface given to you by the background.
2. The note will flash after the addition is successful.
3. The flashing method can be written into the function and called directly.
4. If there is flashing, there must be a timer. If you turn on the timer, you must turn off the timer.
Example, flash when the page is opened.
Code example:
<!DOCTYPE HTML>
<html>
<head>
<title>闪动提示</title>
<style>
*{ margin:0; padding:0;}
.box{color: #000}
.red{color:#d00;}
</style>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script>
function shake(element,className,times){
var i = 0,
t = false ,
o = element.attr("class"),
c = "",
timestimes = 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>The following code prompts two kinds of click flashes, and different verification flashes, such as the flashing of form input errors.
Code sample:
//点击闪动
$("#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);
}
}
);Related learning recommendations:javascript video tutorial
The above is the detailed content of How to use jquery to achieve flashing text effect. For more information, please follow other related articles on the PHP Chinese website!