Tutorials Jquery Create Image Blink Fade In Effect using jQuery And............

Create Image Blink Fade In Effect using jQuery And CSS3

December 27,2010 Read: 8935 Times

Different effect makes your website more attractive to visitors and blinking effect is most effective way to grab user attention. We all are know blinking tag in HTML code. But, "blink" tag is not support in all web browsers. We can use flowing jQuery blink scripts as an alternative of HTML blink tag. That's why today we are going to create a simple but impressive blinking effect using jQuery and CSS3. Blinking effect techniques that, we FadeIn(show) and FadeOut(hide) an item(text/image) with 1sec interval. If you want you can increase time interval. You will create blink effect for both text and image.

jQUery blinking effect

Here I'm going to show effects both for text image. I hope you will like both of them. Have a look at the scripts and it's so simple and easy to implement.

- jQuery Scripts For Image Blink Fade In Effect:

$(function(){

/*Hover effect*/

    $("#my_image").hover(function(){
        $(this).addClass("blinking");
    }, function() {
        $(this).removeClass("blinking");
    }); 

/*Start blinking on document ready.*/

    $("#hover_blink").addClass("blinking");

});

You just need to define an image ID that you want blink. Example: #my_image

- jQuery Scripts For Text Blink Fade In Effect:

$(function(){

/*Here post_title is a h2 tag Id.*/

   $("#post_title").addClass("blinking");

/*Following example first we select a class and then find those 
*elements those contain storng tag and blink text 
*inside strong tag*/

    $(".text_blink_effect").find("strong").addClass("blinking");

});

- CSS3 Scripts For Image Blink Fade In Effect:

body{
    font-family: verdana;
    font-size: 12px;
    width: 500px;
    margin: 0 auto;
    margin-top: 40px;
}

img{
    cursor: pointer;
}

/*Add a simple ccs3 animation effect in here.
*If you want to increase/decrease blink time you can change it easily.
*add any interval amount instead of 2s.
*/

.blinking{
    -webkit-animation: blink 2s infinite;
    -moz-animation: blink 2s infinite;    
    animation: blink 2s infinite;
}

@-webkit-keyframes blink{

    0%{ opacity:0;}
    100%{opacity:1;}
}

@-moz-keyframes blink{
    
    0%{ opacity:0;}
    100%{opacity:1;}

}
        
@keyframes blink{

    0%{ opacity:0;}
    100%{opacity:1;}

}

I've also attached demo and download URL for you. So that, you can have a look before download the scripts.

Demo URL:

http://demos.coolajax.net/jquery/blinking/

Download URL:

http://demos.coolajax.net/jquery/blinking/blinking.zip

I hope you enjoyed my tutorial. Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!