Почему мой код слайдов jquery не работает?

Question

У меня есть три изображения, отображаемые и стилизованных следующим образом:

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

Вот мой 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 

     }); 
    }); 

Этот код работает довольно хорошо. Однако, если я навещу курсор .leftMenuProductButton, перейдите к другому .leftMenuProductButton, затем двигайтесь туда и обратно между ними, он не ведет себя правильно.

Вы можете посмотреть пример на www.raceramps.com/v3.

Answer 1

гм нормально есть 2 вещи, которые я хотел бы изменить, в первую очередь попробуйте изменить

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

}); 

таким способом он не будет удалить класс до тех пор пока полностью утрачен в., Если цепь .removeClass, как вы делали это сразу будет срабатывает после завершения LOAD, а не затухания.

второй я бы остановить все анимации, прежде чем начать новую одну попытку, добавив

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

на верхней части зависания функции