Infinite blink fade loop effect with jQuery
Date: 2010-08-31
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: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>
<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:
Code:
<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>
<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>
2009-12-16 00:49:19
Great. Thank you for this. Simple and straight forward.
No3x — noex.kilu.de
2009-12-16 19:40:37
I think the div have to call 'box' instead of 'inbox_off'.
2010-05-21 19:15:13
Doesn't work...
2010-08-18 19:54:41
I can't get it to work
2010-08-18 20:07:11
oh, duh - have to download script file: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js&downloadBtn
2010-08-31 09:55:24
Thank you No3x. I've changed the div's class now.