Pourquoi mon échange d'image JQuery ne fonctionne-t-il pas dans firefox ou chrome, mais bien dans IE?

Question

Relativement nouveau à JQuery. J'ai du code qui fait un échange de bannière avec un fondu en transition de fondu. Les images sont échangées comme prévu dans IE8, chrome et firefox. Cependant, le fondu réel, la transition en douceur entre les images ne fonctionne que dans IE.

Quelqu'un peut-il me diriger dans la bonne direction pour une solution?

Javascript:

function swapImages() { 
      var $active = $('#transitionImagePlaceHolder .active'); 
      var $next = ($('#transitionImagePlaceHolder .active').next().length > 0) ? $('#transitionImagePlaceHolder .active').next() : $('#transitionImagePlaceHolder img:first'); 

      $active.fadeOut('slow', function() { 

       $next.fadeIn('slow').addClass('active'); 
       $active.removeClass('active'); 
      }); 
     } 

     $(document).ready(function() { 
      setInterval('swapImages()', 5000); 
     }); 

CSS:

#transitionImagePlaceHolder 
    { 

    } 


    #transitionImagePlaceHolder 
    { 
     position:relative; 
     left: 26px; 
    } 

    #transitionImagePlaceHolder img 
    { 
     display:none; 
     position:absolute; 
     top:4; 
     left:10; 
    } 

HTML:

<div id="transitionImagePlaceHolder"> 

     <img class="active" src="Images/TransitionImages/Trans_Img_1.jpg" /> 
     <img src="Images/TransitionImages/Trans_Img_2.jpg" /> 
     <img src="Images/TransitionImages/Trans_Img_3.jpg" /> 


</div> 

Answer 1

Je ne suis pas sûr de ce que le problème est parce que j'ai mis en place l'exemple ci-dessous à JSFiddle et ça fonctionne bien à la fois dans Safari et Firefox. La seule chose que je peux penser est que vous définissez votre fonction swapImages quelque part que vous ne devriez pas être. Vous devriez probablement installer Firebug dans Firefox et voir si vous obtenez une erreur.

http://jsfiddle.net/GtV3U/

Edit: Je soupçonne que vous devez prendre l'appel setInterval sur (document) $ .ready (function() {} ).

Answer 2

Au lieu d'utiliser jQuery, utilisez la petite et efficace JsSlideshow Voir une démonstration rapide here - il fonctionne sur tous les navigateurs.

Il peut facilement être mis en place comme celui-ci

var sl = new JsSlideshow({ 
    target: "slideshow", 
    images: ["4504470765_90aa261be6.jpg", "images/4510204607_42bbb55d9c.jpg", "images/4510826808_f6edfc906a.jpg", "images/4513712885_0c008e3638.jpg"], 
    transition: 3000, 
    time: 2000, 
    url: "http://www.flickr.com/photos/bobowen" 
}); 

Answer 3

Je dirais que c'est parce que Firefox et Chrome (probablement à juste titre) ne modifient pas display propriété css tout fadeIn/fadeOut. Faire un test rapide: au lieu de display:none; en CSS, faites très vite fadeOut (20 ms) sur les images non-actives après (document) .ready.

Si cela fonctionne, vous saurez que vous devez trouver un autre moyen de masquer les images en charge.