jquery Animer ne se déclenche pas

<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() fonctionne très bien, mais Animate_2() affichera simplement la bg2.jpg sans animant l'opacité .. C'est le même dans IE et Firefox ..jquery Animer ne se déclenche pas

Pourquoi est-ce> ??

Source

2009-06-02 Anonymous

Votre vrai problème est que l'opacité est une échelle de 0 à 1, de 0 à 100. Mais voici quelques légères améliorations:

Vous pouvez simplifier le code aussi beaucoup que vous avez juste une image au-dessus d'un autre.

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

Je me suis trompé avec vos valeurs de temps pour le montrer plus rapidement.

Ou corrigez-le. Vous avez besoin de window. avant setTimeout. Correctif simple.

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

Source

2009-06-02 13:29:28 Oli

Exactement le même résultat .. Tout d'abord Animer est bien, la deuxième fois il ne sera pas animé mais juste rapidement change l'image. –

Je vois ce que tu veux dire. L'opacité est une échelle de 0 à 1, pas de 0 à 100. Elle l'animait mais elle était complètement opaque 1 1/100ème de son passage. J'ai corrigé mes deux exemples de code. – Oli

C'était tout! Merci beaucoup ... Ça me fait me sentir si bête après. –

Je ne pouvais pas obtenir les mêmes résultats que vous décrivez sur Firefox 3.0.10 Ubuntu, Animate_2 semble fonctionner très bien. Au début, je pensais que c'était peut-être parce que vous utilisiez un fichier local au lieu d'exécuter votre page via un serveur localhost (comme apache) mais cela n'a pas changé les résultats pour moi, mais je me souviens des problèmes avec la plate-forme Windows autrefois. J'ai aussi essayé avec le script de pré-charge suivante, et cela ne semble supprimer une animation initiale bégayer sur ma machine:

 
jQuery.preloadImages = function() 
       { 
        for(var i = 0; i").attr("src", arguments[i]); 
        } 
       } 
$.preloadImages("imgages/bg1.jpg", "imgages/bg2.jpg");

Source

2009-06-02 14:42:09 user105090

jquery Animer ne se déclenche pas

Répondre

Questions connexes