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（）是给同一类的图像和一些组合（得到这个来自谷歌浏览器检查元素）

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