logo

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>



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>

David

2009-12-16 00:49:19

Great. Thank you for this. Simple and straight forward.


No3xnoex.kilu.de

2009-12-16 19:40:37

I think the div have to call 'box' instead of 'inbox_off'.


Jeremy

2010-05-21 19:15:13

Doesn't work...


Brittany

2010-08-18 19:54:41

I can't get it to work


Brittany

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


Ubuntudog

2010-08-31 09:55:24

Thank you No3x. I've changed the div's class now.


Alqin

2010-09-26 07:07:55

For inspiration:
function blink() {
$(".box")
.fadeTo(400, 0.33)
.fadeTo(400, 1, function(){blink()});
}
$(function(){
blink();
});


Dean

2010-10-01 21:51:31

Thank you No3x. I've changed it now and script should work as intended.


gert

2011-05-10 12:30:35

how do i stop this?


I rkecon you are quiI rkecon you are quite dead on with that.

2011-07-17 21:08:27

I rkecon you are quite dead on with that.


Matt K

2011-10-21 20:33:35

Can't stop this as is... actually crashes browser if called multiple times.


Francescoskino.it

2012-01-23 17:58:11

Cool, thanks!


ubuntudog.com © 2014 | About | Sitemap | Contact