Saturday 19 October 2013

Blink button text using jquery



<div>
<a href="#" class="btn"><span class="blink">Blink this</span></a>
    <div>

div { padding: 20px; }
.btn {
    background:#a00;
    color:#fff;
    border: 1px solid #900;
    padding: 4px 8px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    margin: 20px;
    text-transform: uppercase;
    text-decoration: none;
    font: bold 16px Verdana, sans-serif;
    text-shadow: 0 0 1px #000;
    box-shadow: 0 2px 2px #aaa;
    -moz-box-shadow: 0 2px 2px #aaa;
    -webkit-box-shadow: 0 2px 2px #aaa;}


var timer;
jQuery(function($) {
    timer = setTimeout(blnk, 0);
});


function blnk() {
    $(".blink").css({opacity: 0}).
        animate({opacity: 1}, 500, "linear").
        animate({opacity: 0}, 300, "linear",
        function() {
            timer = setTimeout(blnk, 0);
        });
}

No comments:

Post a Comment