Monday, November 24, 2014

How to blink a div using jquery ?

<style type="text/css">

.blink{
width: 250px;
padding: 5px;
background: red;
text-align: center;
color: white;
font-weight: bold;
font-size: 25px;
font-family: comic sans ms;
border-radius: 10px;
}

.nblink{
font-family: verdana;
font-weight: bold;
font-size: 27px;
padding-left: 20px;
}

</style>

<script type="text/javascript" src="jquery-1.11.1.min.js"></script> //Attach jQuery file here

<div class="blink">Blinking text</div>
<span class="nblink">Non-Blinking</span>
<div class="blink">Blinking text</div>

<script type="text/javascript">

function blink(selector){
$(selector).fadeOut('slow', function(){
   $(this).fadeIn('slow', function(){
       blink(this);
   });
});
}
 
blink('.blink');

</script>

Output :)

1)

2)

No comments:

Post a Comment