Possible Duplicate:
Blink an div with jquery
I need to know how to make blink of div in jquery?
JavaScript Code :fadeOut(500); $('. blink'). fadeIn(500); } setInterval(blink_text, 1000);
You can add the . blink class to any HTML element to make it blink.
html
<div class="blink">blinking text</div>
jquery
function blink(selector){
$(selector).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this);
});
});
}
blink('.blink');
demo :
function blink(selector) {
$(selector).fadeOut('slow', function() {
$(this).fadeIn('slow', function() {
blink(this);
});
});
}
blink('.blink');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="blink">blinking text</div>
non-blinking
<div class="blink">more blinking text</div>
Update (bringing the answer up-to-date)
You do not need to use jQuery for such effects anymore. You can do it with just CSS (using CSS animations).
(compatibility table at http://caniuse.com/#feat=css-animation)
CSS (using the standard properties)
.blink{
animation:blink 700ms infinite alternate;
}
@keyframes blink {
from { opacity:1; }
to { opacity:0; }
};
Demo (with vendor prefixed properties) :
.blink {
-webkit-animation: blink 700ms infinite alternate;
-moz-animation: blink 700ms infinite alternate;
-o-animation: blink 700ms infinite alternate;
animation: blink 700ms infinite alternate;
}
@-webkit-keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-o-keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-moz-keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
;
<div class="blink">blinking text</div>
non-blinking
<div class="blink">more blinking text</div>
Assuming your div has id="blinkMe"
setInterval(function () {
var vis = $("#blinkMe").css("visibility");
vis = (!vis || vis == "visible") ? "hidden" : "visible";
$("#blinkMe").css("visibility", vis);
}, 500);
Note: used "visibility" and not "display" / .toggle()
since the latter will cause layout to shift around while the div is blinking.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With