What is an easy way to make text blinking in jQuery and a way to stop it? Must work for IE, FF and Chrome. Thanks
What is an easy way to make text blinking in jQuery and a way to stop it? Must work for IE, FF and Chrome. Thanks
Combine the codes above, I think this is a good solution.
function blink(selector){
$(selector).animate({opacity:0}, 50, "linear", function(){
$(this).delay(800);
$(this).animate({opacity:1}, 50, function(){
blink(this);
});
$(this).delay(800);
});
}
At least it works on my web. http://140.138.168.123/2y78%202782
$(".myblink").css("text-decoration", "blink");
do not work with IE 7 & Safari. Work well with Firefox
I was going to post the steps-timed polyfill, but then I remembered that I really don’t want to ever see this effect, so…
function blink(element, interval) {
var visible = true;
setInterval(function() {
visible = !visible;
element.style.visibility = visible ? "visible" : "hidden";
}, interval || 1000);
}
This code might help to this topic. Simple, yet useful.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval("$('#myID/.myClass').toggle();",500);
});
</script>
Seeing the number of views on this question, and the lack of answers that cover both blinking and stopping it, here goes: try jQuery.blinker out (demo).
HTML:
<p>Hello there!</p>
JavaScript:
var p = $("p");
p.blinker();
p.bind({
// pause blinking on mouseenter
mouseenter: function(){
$(this).data("blinker").pause();
},
// resume blinking on mouseleave
mouseleave: function(){
$(this).data("blinker").blinkagain();
}
});
Text Blinking start and stop on button click -
<input type="button" id="btnclick" value="click" />
var intervalA;
var intervalB;
$(document).ready(function () {
$('#btnclick').click(function () {
blinkFont();
setTimeout(function () {
clearInterval(intervalA);
clearInterval(intervalB);
}, 5000);
});
});
function blinkFont() {
document.getElementById("blink").style.color = "red"
document.getElementById("blink").style.background = "black"
intervalA = setTimeout("blinkFont()", 500);
}
function setblinkFont() {
document.getElementById("blink").style.color = "black"
document.getElementById("blink").style.background = "red"
intervalB = setTimeout("blinkFont()", 500);
}
</script>
<div id="blink" class="live-chat">
<span>This is blinking text and background</span>
</div>

$('.blink').fadeIn('fast')
.animate({
color: "#FFCD56"
}, 100).animate({
color: "white"
}, 100)
.animate({
color: "#FFCD56"
}, 100).animate({
color: "white"
}, 100)
.animate({
color: "#FFCD56"
}, 100).animate({
color: "white"
}, 100)
.animate({
color: "#FFCD56"
}, 100).animate({
color: "white"
}, 100)
.animate({
color: "#FFCD56"
}, 100).animate({
color: "white"
}, 100);