How to blink a text on button in IE ,chrome etc using JQuery or CSS

Tags: jquery,css,internet-explorer,cross-browser

Problem :

To blink a text on button in IE, chrome, safari either using css or JQuery


will work in Firefox, not in IE.

Here I want to blink the value of button, not the button entirely.

I am using

    <input id="button12" type="button"  class ="button-click" value="X"> 

Here I want to blink button value 'X' only and button will remains unchanged in blink of value i.e button will not blink.

Solution :

Just for the fun of it, here's one that animates:

setInterval(blink, 710);
function blink() {
    var elm = $("#button12"),
    mycolor = elm.css('color');
    mycolor == 'rgb(0, 0, 0)' ? mycolor='transparent' : mycolor='rgb(0, 0, 0)';
    elm.animate({color: mycolor},300);

With a FIDDLE!


And one that does not animate:

setInterval(blink, 500);
function blink() {
    var elm = $("#button12"),
    myval = elm.val();
    myval == "" ? myval="X" : myval="";

Also with a FIDDLE!

    CSS Howto..

    How do I avoid 'bottom-aligned' labels with inline associated inputs?

    How to modify this CSS based Accordion to work with multiple accordions on the same page?

    How to Scale Down a Large Image Using HTML and/or CSS

    How to localize the CSS just for this table's use?

    How to add padding space in /div container via CSS?

    How to select a css class as selected dynamically in mvc

    How to adjust the height of the footer automatically

    How to select nth child of specific tag with css?

    How to display a div over other content and in the center of webpage using CSS?

    How can I show a loading screen while a really large image is loading?

    How to target Microsoft Edge with CSS? [duplicate]

    How to include css in mulitple jsps?

    How can I center two images side-by-side with Bootstrap 3?

    How can i use css frameworks without cluttering html with too many classes [closed]

    How to write HTML, CSS and Javascript all together in Joomla 2.5 article? [closed]

    How to make image 3D using CSS

    CSS : How to make two column right fluid left fluid depend on right

    css: how to make the third div line up with the first div

    How to use CSS function instead of LESS function?

    MaterializeCSS - Mobile Collapse menu not showing when clicked

    How to make and use LESS templates?

    How to prevent slider from stretching?

    Dialogs are showing at the bottom of the page

    How to copy this semi-static menu?

    How to center FontAwesome icon in css before content vertically

    How float divs inside a td

    How to select nth line of text (CSS/JS)

    How do I differentiate between IE versions 6 to 10 using IE CSS Hacks?

    How to indent text in a select drop down menu using CSS

    css: how to remove pseudo elements (after, before, …)