jquery animado não dispara

StackOverflow https://stackoverflow.com/questions/939485

  •  06-09-2019
  •  | 
  •  

Pergunta 

<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 () multa funciona, mas Animate_2 () irá apenas exibir o bg2.jpg sem animar a opacidade .. Este é o mesmo no IE e Firefox ..

Porque é que este> ??

Foi útil?

Solução

Seu problema real é que a opacidade é uma escala de 0 a 1, não 0 a 100. Mas aqui estão algumas ligeiras melhorias:

Você pode simplificar o código muito também como você só tem uma imagem em cima do outro. 

    <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>

Eu já mexeu com seus valores de tempo para mostrá-lo mais rápido.

Ou corrigi-lo. Você precisa window. antes setTimeout. reparo simples. 

    <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>

Outras dicas

Eu não poderia obter os mesmos resultados que você descreve no Firefox 3.0.10 Ubuntu, Animate_2 parece funcionar bem. No começo eu pensei que poderia ser porque você pode estar usando um arquivo local em vez de correr sua página através de um servidor localhost (como o Apache), mas que não alterou os resultados para mim, mas eu me lembro problemas com que o trabalho na plataforma Windows no passado. Eu também tentei com o seguinte script pré-carga, e que parece remover um gaguejar animação inicial em minha máquina: 

jQuery.preloadImages = function()
                {
                  for(var i = 0; i").attr("src", arguments[i]);
                    }
                }
$.preloadImages("imgages/bg1.jpg", "imgages/bg2.jpg");
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top