Wo-commerce sidebar navigation

BLINK EFFECT IN HTML DOCUMENT USING JQUERY

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.

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;}

}