toggle me
Javascript fade background images using jquery
0
posted on: September 22nd, 2010
posted by: admin
in: Scripts, Web Development

After looking everywhere including jqueryetc for a way to do an image swap that fades, but using the background images, I figured out a rough way to do it.

This is not a fully tested and final way of doing background image fading sequence but thought I would put it out as a potential way to do it. Hopefully it helps somebody looking for it.

<!DOCTYPE html>
<html>
<head>
<style>
#test1, #test2, #test3 { height:200px; background-position:center; background-repeat:no-repeat;width:100%; position:absolute; }
#test1 {
background-image:url(‘img/img1.jpg’);
}
#test2 {
background-image:url(‘img/img2.jpg’);
display:none;
}
#test3 {
background-image:url(‘img/img3.jpg’);
display:none;
}
</style>
<script src=”http://code.jquery.com/jquery-latest.min.js”></script>
</head>
<body>
<script>
var $i = 1;
var auto_refresh = setInterval(
function ()
{
if($i==4) {
$(“#test3”).fadeOut(1000);
$(“#test2”).fadeOut(1000);
$i=1;
} else {
$(“#test”+$i).fadeIn(1000);
$i=$i+1;
}
}, 3000);

</script>

<div id=”test1″>&nbsp;</div>
<div id=”test2″>&nbsp;</div>
<div id=”test3″>&nbsp;</div>

</body>
</html>

Recent Posts

Leave a Comment