jQuery UI switchClass() не работает отлично

Question

Я разрабатываю галерею изображений с фотографиями, скользящими left и right на мыши scroll up и scroll down соответственно.

галерея с 5 фото выглядит следующим образом:

http://www.games07.tk/Untitled.png

Функция:

function scrollPhotosLeft() 
{ 
     $(".photo0").switchClass("photo0","photo1",500); 
     $(".photo1").switchClass("photo1","photo2",500); 
     $(".photo2").switchClass("photo2","photo4",500); 
     $(".photo3").switchClass("photo3","photo0",500); 
     $(".photo4").switchClass("photo4","photo3",500); 
} 
function scrollPhotosRight() 
{ 
     $(".photo0").switchClass("photo0","photo3",500); 
     $(".photo1").switchClass("photo1","photo0",500); 
     $(".photo2").switchClass("photo2","photo1",500); 
     $(".photo3").switchClass("photo3","photo4",500); 
     $(".photo4").switchClass("photo4","photo2",500); 
} 

CSS:

.photo0{ 
    top: 50%; 
    left: 50%; 
} 
.photo1{ 
    top: 40%; 
    left: 30%; 
} 
.photo2{ 
    top: 30%; 
    left: 10%; 
} 
.photo3{ 
    top: 40%; 
    left: 70%; 
} 
.photo4{ 
    top: 30%; 
    left:90%; 
} 

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

http://www.games07.tk/Untitled2.png

Есть ли способ преодолеть эту проблему или какой-либо другой способ реализации этого?

я заметил, что после некоторой комбинации прокрутки вверх и вниз по switchClass() дает тот же класс для изображений (получил это от Google Chrome Проверьте элемент)

Answer 1

switchClass не изменяет класс до анимации отделки , поэтому вызов его снова до истечения половины секунды приведет к забавному поведению.

Вы должны предварительно выбрать, сохранить текущую позицию и использовать анимацию вместо подкачки классов;

var p0 = $(".photo0"); 
var p1 = $(".photo1"); 
// etc 
var i = 0; 
var posn = [ 
    {x:50,y:50}, 
    {x:100,y:70}, 
    {x:150,y:80}, 
    {x:200,y:70}, 
    {x:250,y:50} 
]; 
function movePhotos(){ 
    p0.animate(posn[i], 500); 
    p1.animate(posn[(i+1)%5], 500); 
    // etc 
} 
function scrollPhotosLeft(){ 
    i = (i + 1) % 5; 
    movePhotos(); 
} 
function scrollPhotosRight(){ 
    i = (i + 5 - 1) % 5; 
    movePhotos(); 
}