jQuery UI switchClass() not working perfectly

Question

I am developing an image gallery with photos sliding left and right on mouse scroll up and scroll down respectively.

The gallery with 5 photos looks like this:

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

Function:

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

Scrolling down causes no problem but in some conditions scrolling down and suddenly scrolling up causes the photos to look like this:

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

Is there any way to overcome this problem or any other way to implement this?

I had noticed that after some combination of scrolling up and down the switchClass() is giving same class for images (got this from Google Chrome Inspect Element)

Have you tried any other browsers to see if it operates differently? — Adam Plocher, Mar 09 '13 at 04:33
Possible duplicate: http://stackoverflow.com/questions/7925994/jquery-ui-switchclass-method-is-not-working-properly ? — greener, Mar 09 '13 at 04:35

score 2 · Accepted Answer · answered Mar 09 '13 at 04:47

switchClass doesn't change the class until the animation finishes, so calling it again before half a second has elapsed will cause funny behaviour.

You should pre-select, store a current position, and use animate instead of swapping classes;

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

jQuery UI switchClass() not working perfectly

1 Answers1