ubuntudog-js

Infinite blink fade loop effect with jQuery

by

This article will show you how easy it is to make an object fadein and out forever. 1. Create a HTML file and in the <head> section include the following code:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
.box {
border:1px solid black;
background:gray;
padding:10px;
}
</style>

2. Now in between <body></body> tags copy and paste the code below:

<div class="box">This is a box</div>
<script type="text/javascript">
// Infinite blink/fade 
function effectFadeIn(classname) {
$("."+classname).fadeOut(800).fadeIn(800, effectFadeOut(classname))
}
function effectFadeOut(classname) {
$("."+classname).fadeIn(800).fadeOut(800, effectFadeIn(classname))
}
$(document).ready(function(){
effectFadeIn('box');
});
</script>