Pourquoi mon code de diaporama jquery ne fonctionne-t-il pas?

Question

J'ai trois images, affichées et coiffés comme suit:

<img id="img1" src="images/category_slideshow/yellow-viper-on-car-ramps.jpg" alt="Yellow Viper on Race Ramps Car Ramps" width="557" height="415" /> 
     <img class="onBottom" src="" width="557" height="415" /> 
     <img class="onTop" src="" width="557" height="415" /> 

.onBottom{ 
    position:absolute; 
    margin-top:-415px; 
    background:url(../images/category_slideshow/loading.gif) center no-repeat; 
} 

.onTop{ 
    position:absolute; 
    margin-top:-415px; 
    background:url(../images/category_slideshow/loading.gif) center no-repeat; 
} 

Voici mon Javascript:

$(document).ready(function() { 

    var productImages = new Array(); 
    productImages["raceramps56"] = "images/category_slideshow/black-350z-on-car-ramps.jpg"; 
    productImages["raceramps67"] = "images/category_slideshow/red-corvette-on-car-ramps.jpg"; 
    productImages["xtenders"] = "images/category_slideshow/silver-sti-on-xtenders.jpg"; 
    productImages["sportramps"] = "images/category_slideshow/black-corvete-on-car-ramps.jpg"; 
    productImages["rollups"] = "images/category_slideshow/yellow-lotus-on-rollups-for-car-ramps.jpg"; 


    $(".onTop, .onBottom").css("opacity", "0"); //Give the two images 0 opacity 

    $('.leftMenuProductButton').hover ( 
     function() {       
     //.leftMenuProductButton is a button in a menu. 
     // There are several of these buttons, each button 
     // has an ID such as "raceramps56" or "xtenders" 

     var swapIMG = $(this).attr("id"); //This gets the ID, such as "raceramps56" or "xtenders" 

     $(".onTop").css({opacity: '0', 'z-index': '3'}) 
      .attr("src", productImages[swapIMG]) 
      .load(function() { 
      //This takes the first IMG, make it invsisbile, 
      // brings it to the top, replaces it's SRC image 
      // with the variable, then once it is loaded, it fades in. 
      $(this).fadeTo(300, 1); 
      }) 
      .removeClass("onTop") 
      .addClass("replaceMe"); // This removes the class "onTop and replaces it with "replaceMe". I can't simply change onTop to onBottom yet, as I need to reference onBottom later. 

     $(".onBottom").addClass("onTop").removeClass("onBottom").css({'z-index': '1'}); // This converts onTop to onBottom, and puts it at the bottom. 

     $(".replaceMe").removeClass("replaceMe").addClass("onBottom"); //Now that I no longer have an onBottom, I can replace replaceMe with onBottom 

     }, 
     function() { 
     //does nothing right now 

     }); 
    }); 

Ce code fonctionne très bien. Cependant, si je souris .leftMenuProductButton, puis déplacez vers un autre .leftMenuProductButton, puis déplacez-vous dans les deux sens, il ne se comporte pas correctement.

Vous pouvez voir un exemple sur www.raceramps.com/v3.

Answer 1

hm ok il y a 2 choses que je changerais tout d'abord essayer de modifier

$(".onTop").css({opacity: '0', 'z-index': '3'}).attr("src",productImages[swapIMG]).load(function() { 
      $(this).fadeTo(300, 1, function(){ 
    $(this).removeClass("onTop").addClass("replaceMe"); 
}); 

}); 

cette façon, il Effacez la classe jusqu'à ce complètement fané dans. Wont si vous enchaînez .removeClass comme vous l'avez fait sera immédiatement déclenché après la fin de la charge n'est pas le fondu.

seconde, je cesserais toutes les animations avant de commencer une nouvelle tentative d'ajouter

$(".onTop").stop(); 

sur le dessus de votre fonction planant