pourquoi ce code jQuery ne fonctionne que dans FireFox?

Question

J'ai eu quelques problèmes avec un widget de pagination que j'ai écrit dans jQuery. Fondamentalement, lorsque le diaporama change d'images et de légendes, les décalages de pagination font avancer un indicateur. Le code fonctionne parfaitement dans FireFox mais pas dans Chrome, IE, Opera. Voici le jQuery.

function autoSlideshow(mode) { 
     var currentImage = $('#gallery li.visible');          //Determine which slide is visible 
     var currentCaption = $('#caption li.visible'); 
     var currentSlide = $('#controls a.pagination.visible');  

     if(mode == -1){ 
      var nextImage = currentImage.next().length ? currentImage.next() :    //Determine the next slide 
         currentImage.siblings(':first');   
      var nextCaption = currentCaption.next().length ? currentCaption.next() :   
         currentCaption.siblings(':first'); 
      var nextSlide = currentSlide.next().length ? currentSlide.next() :   
         currentSlide.siblings(':eq(1)'); 
     } 
     else{ 
      var nextImage = $('#gallery li:eq('+mode+')'); 
      var nextCaption = $('#caption li:eq('+mode+')'); 
      var nextSlide = $('#controls a.pagination:eq('+mode+')'); 
     } 

     currentImage.fadeOut(250).removeClass('visible'); 
     nextImage.fadeIn(250).addClass('visible'); 
     currentCaption.fadeOut(250).removeClass('visible'); 
     nextCaption.fadeIn(250).addClass('visible'); 
     currentSlide.css('background-image','url(images/controls/page.png').removeClass('visible'); 
     nextSlide.css('background-image','url(images/controls/current.png').addClass('visible'); 

    } 

Et voici le code HTML pour l'accompagner.

<div id="slideshow"> 
      <ul id="gallery"> 
       <li><img src="images/slideshow/waves.png" alt="Sunset"/></li> 
       <li><img src="images/slideshow/whale.jpg" alt="Whale" /></li> 
       <li><img src="images/slideshow/maldives.jpg" alt="Maldives" /></li> 
       <li><img src="images/slideshow/birdflock.jpg" alt="Flock of Birds" /></li> 
       <li><img src="images/slideshow/bugatti.jpg" alt="Bugattis" /></li> 
       <li><img src="images/slideshow/dumbanddumber.jpg" alt="Dumb and Dumber" /></li> 
      </ul> 
      <ul id="caption"> 
       <li class="visible"> 
        <h2>Stuff!!</h2> 
        <p> 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel magna purus. Suspendisse porttitor velit id leo 
         bibendum ac commodo odio tincidunt. 
        </p> 
        <a href="#" class="button">Let's Go</a> 
       </li> 
       <li> 
        <h2>More Stuff</h2> 
        <p> 
         Suspendisse id libero vel neque faucibus blandit et in eros.Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
         Integer vel magna purus. 
        </p> 
        <a href="#" class="button">Let's Go</a> 
       </li> 
       <li> 
        <h2>Benefits of Stuff</h2> 
        <p> 
         Sed hendrerit, quam et hendrerit faucibus, mauris arcu ultrices erat, ac placerat risus nulla nec risus. 
         Lorem ipsum dolor sit amet. 
        </p> 
        <a href="#" class="button">Let's Go</a> 
       </li> 
       <li> 
        <h2>Other Stuff</h2> 
        <p> 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel magna purus. Suspendisse porttitor velit id leo 
         bibendum ac commodo odio tincidunt. 
        </p> 
        <a href="#" class="button">Let's Go</a> 
       </li> 
       <li> 
        <h2>Interresting Stuff</h2> 
        <p> 
         Sed hendrerit, quam et hendrerit faucibus, mauris arcu ultrices erat, ac placerat risus nulla nec risus. 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        </p> 
        <a href="#" class="button">Let's Go</a> 
       </li> 
       <li> 
        <h2>Heading</h2> 
        <p> 
         Suspendisse id libero vel neque faucibus blandit et in eros.Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
         Integer vel magna purus. 
        </p> 
        <a href="#" class="button">Let's Go</a> 
       </li> 

      </ul> 
      <ul id="controls"> 
       <a href="#" class="playpause"></a> 
       <a href="#" class="pagination"></a> 
       <a href="#" class="pagination"></a> 
       <a href="#" class="pagination"></a> 
       <a href="#" class="pagination"></a> 
       <a href="#" class="pagination"></a> 
       <a href="#" class="pagination"></a>      
      </ul> 

Il ya un/div pour terminer le diaporama div mais j'étais trop paresseux pour le recopier: p. Merci les gars pour votre aide!

Mo

Answer 1

Très bien, je l'ai compris. Au lieu de changer directement le css, j'ai juste utilisé la classe visible pour changer l'image ... la solution la plus simple est toujours la meilleure solution: p. Merci pour votre aide les gars.

Answer 2

Avez-vous une erreur javascript qui se produit, mais Firefox ne se soucie pas et se déplace, mais les autres navigateurs ne sont arrêter là-dessus?