ansaurus

Question

Answer 1

+1 A:

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 2009-06-02 13:29:28

Exactly the same result.. First animate is fine, second time it will not animate but just quickly change the image.

2009-06-02 13:31:51

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.

Oli 2009-06-02 13:43:43

That was it! Thanks a lot... Makes me feel so stupid afterwards..

2009-06-02 13:45:55

Answer 2

A:

I couldn't get the same results that you describe on Firefox 3.0.10 Ubuntu, Animate_2 seems 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");

2009-06-02 14:42:09

Answer 3

A:

@~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.

2009-09-02 20:26:04

ansaurus

tags:

views:

answers:

jquery animate doesn't fire

related questions