animation jQuery/JS foiré (Firefox/IE)

modifier:animation jQuery/JS foiré (Firefox/IE)

problème ne semble pas se limiter à IE, voir mon post de réponse ci-dessous pour une testcase.

Bonjour, je suis en rotation entre 3 différentes images de fond sur un logo:

$(function() { 

    function Animate_2() { 

     $("div#bg1").animate({opacity: 0 }, 2000); 
     $("div#bg2").animate({opacity: 100}, 2000); 

     setTimeout(Animate_3, 5000); 

    } 

    function Animate_3() { 

     $("div#bg2").animate({opacity: 0 }, 2000); 
     $("div#bg3").animate({opacity: 100}, 2000); 

     setTimeout(Animate_1, 5000); 

    } 

    function Animate_1() { 

     $("div#bg3").animate({opacity: 0 }, 2000); 
     $("div#bg1").animate({opacity: 100}, 2000); 

     setTimeout(Animate_2, 5000); 

    } 

    /* Start it */ 
    setTimeout(Animate_2, 5000); 

});

bg1 à BG3 ont les styles suivants:

div#bg1 { 
    height:    159px; 
    width:    800px; 
    margin-left:  auto; 
    margin-right:  auto; 
    background-image: url('images/bg_1.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/bg_2.jpg'); 
    background-repeat: no-repeat; 
    background-position:center center; 
    position:   relative; 
    z-index:   2; 
    margin-top:   -159px; 
} 

div#bg3 { 
    height:    159px; 
    width:    800px; 
    margin-left:  auto; 
    margin-right:  auto; 
    background-image: url('images/bg_3.jpg'); 
    background-repeat: no-repeat; 
    background-position:center center; 
    position:   relative; 
    z-index:   1; 
    margin-top:   -159px; 
}

IE le fait très bien pour la première animation, bg1 disparaît doucement tandis que bg2 se fane ... Après cette première transition parfaite, il se bloque dans IE (toutes les versions!) alors qu'il fonctionne très bien dans Firefox, Chrome, Safari et Opera.

Dans IE l'image ne change, mais il n'a pas bien fade out/in ...

Lors de l'exécution à travers IETester, je reçois continuellement le curseur de sablier comme si elle télécharge l'image d'arrière-plan sur la voler ...

Quelqu'un peut-il m'aider avec cela?

Source

2009-06-02 Anonymous

Que voulez-vous dire par "ça se dévisse"? L'animation s'arrête-t-elle ou est-ce que quelque chose d'autre ne va pas? –

L'image change, mais elle ne disparaît pas correctement –

Pouvez-vous vérifier ce qui se passe lorsque vous démarrez avec Animate_3() au lieu de Animate_2()? –

J'ai maintenant réussi à produire ce comportement sur Firefox, avec le code suivant:

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

Tout va bien et dandy au premier Animer, mais il change juste l'image (! Sans animation) à animate_2 () ...

Source

2009-06-02 12:45:43

BG1: http://i44.tinypic.com/2yvwhoy.jpg BG2: http://i42.tinypic.com/s5zcrc.jpg –

Vous pourriez vouloir essayer quelque chose comme ceci: `

 $(function() 
     {setTimeout(dostuff, 1000);}); 
     function dostuff(){ 
    $("div#bg1").animate({opacity: 100}, 1000).animate({opacity: 100}, 1000).animate({opacity: 0}, 1000).animate({opacity: 0}, 1000).animate({opacity: 100}, 1000); 
    $("div#bg2").animate({opacity: 0}, 1000).animate({opacity: 0}, 1000).animate({opacity: 100}, 1000).animate({opacity:100}, 1000).animate({opacity: 0}, 1000);dostuff()}

Une des choses à propos de jquery est que vous pouvez enchaîner des choses. Le faire comme ceci est moins compliqué et plus facile à suivre et à déboguer je pense.

Source

2009-06-02 13:20:39 matpol

animation jQuery/JS foiré (Firefox/IE)

Répondre

Questions connexes