jquery animate non si attiva

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

  •  06-09-2019
  •  | 
  •  

Domanda 

<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 () funziona bene, ma Animate_2 () sarà solo visualizzare il bg2.jpg senza animare l'opacità .. Questo è lo stesso in IE e Firefox ..

Perché è questo> ??

È stato utile?

Soluzione

Il vero problema è che l'opacità è una scala da 0 a 1, non è da 0 a 100. Ma qui ci sono alcune lievi miglioramenti:

Si potrebbe semplificare il codice molto anche come hai appena avuto una sola immagine sopra l'altro. 

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

Ho rovinato con i tuoi valori di temporizzazione per mostrare più veloce.

O risolvere il problema. È necessario prima di window. setTimeout. Semplice correzione. 

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

Altri suggerimenti

non ho potuto ottenere gli stessi risultati che descrivi su Firefox 3.0.10 Ubuntu, Animate_2 sembra funzionare bene. In un primo momento ho pensato che potrebbe essere perché si potrebbero utilizzare un file locale invece di eseguire la pagina attraverso un server localhost (come Apache), ma che non ha modificato il risultato per me, ma mi ricordo di problemi con che lavorare sulla piattaforma Windows nel passato. Ho anche provato con il seguente script precarico, e che sembra rimuovere una balbuzie animazione iniziale sulla mia macchina: 

jQuery.preloadImages = function()
                {
                  for(var i = 0; i").attr("src", arguments[i]);
                    }
                }
$.preloadImages("imgages/bg1.jpg", "imgages/bg2.jpg");
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top