<html>
<head>
<style type="text/css">
div#bg1 {
height: 159px;
width: 800px;
margin-left: auto;
margin-right: auto;
background-image: url('images/bg1.jpg');
background-repeat: no-repeat;
background-position:center center;
position: relative;
z-index: 3;
}
div#bg2 {
height: 159px;
width: 800px;
margin-left: auto;
margin-right: auto;
background-image: url('images/bg2.jpg');
background-repeat: no-repeat;
background-position:center center;
position: relative;
z-index: 2;
margin-top: -159px;
}
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function Animate_2()
{
$("div#bg1").animate({opacity: 100}, 2000);
$("div#bg2").animate({opacity: 0 }, 2000);
setTimeout(Animate_1, 5000);
}
function Animate_1()
{
$("div#bg1").animate({opacity: 0 }, 2000);
$("div#bg2").animate({opacity: 100}, 2000);
setTimeout(Animate_2, 5000);
}
$(function()
{
/* Start cycle */
setTimeout(Animate_1, 5000);
});
</script>
</head>
<body>
<div id="bg1"></div>
<div id="bg2"></div>
</body>
</html>
Animate_1() works fine, but Animate_2() will just display the bg2.jpg without animating the opacity.. This is the same in IE and Firefox..
Why is this >??
-
Your real problem is that opacity is a scale of 0 to 1, not 0 to 100. But here are some slight improvements:
You could simplify the code a lot too as you've just got one image on top of another.
<script type="text/javascript"> var shown = true; function toggleFront() { shown = !shown; $("div#bg1").animate({opacity: shown*1}, 200); window.setTimeout(toggleFront, 1000); } $(function() { /* Start cycle */ window.setTimeout(toggleFront, 500); }); </script>I've messed with your timing values to show it faster.
Or fix it. You need
window.before setTimeout. Simple fix.<script type="text/javascript"> function Animate_2() { $("div#bg1").animate({opacity: 1}, 2000); $("div#bg2").animate({opacity: 0 }, 2000); window.setTimeout(Animate_1, 5000); } function Animate_1() { $("div#bg1").animate({opacity: 0 }, 2000); $("div#bg2").animate({opacity: 1}, 2000); window.setTimeout(Animate_2, 5000); } $(function() { /* Start cycle */ window.setTimeout(Animate_1, 5000); }); </script>Oli : I see what you mean. Opacity is a scale of 0 to 1, not 0 to 100. It was animating it but it was completely opaque 1 1/100th of the way through. I've fixed both my code samples. -
I couldn't get the same results that you describe on Firefox 3.0.10 Ubuntu,
Animate_2seems to work fine. At first I thought it might be because you might be using a local file instead of running your page through a localhost server (like apache) but that didn't change the results for me, but I remember problems with that working on the Windows platform in the past. I also tried it with the following preload script, and that does seem to remove an initial animation stutter on my machine:jQuery.preloadImages = function() { for(var i = 0; i").attr("src", arguments[i]); } } $.preloadImages("imgages/bg1.jpg", "imgages/bg2.jpg"); -
@~jack-laplante:
Your concept might help with a problem I have - thanks!
Unfortunately, the code isn't written correctly, and at the moment my brain is too foggy to figure out how to fix it.
0 comments:
Post a Comment