CODEWITHSUNDEEP
jqueryhtml
bestfriendsforever
bestfriendsforever

Reputation: 351

.slideUp and .slideDown suddenly stopped working smoothly

I'm currently in charge of this illustration website with an image-gallery which was working fine until recently. It had a smooth slideUp slideDown animation and everyone was happy. Then all of a sudden this smoothness stopped working and the images are now shuffling about all over the place. Perhaps this has something to do with the JQuery update recently, or maybe something is just plain wrong in my code?

This is the JQuery for the image gallery here:

(function() {
    var nav = $('.nav div');
    var images = $('.images li');
    var imagebutton = $('.images li:not(:last) > img');
    $('.images li:first-child').slideDown(500);
    nav.click(function() {
        var imageno = nav.index(this);
        images.slideUp(500);
        images.eq(imageno).slideDown(500);
        return false;
    });
    imagebutton.click(function() {
        $(this).parent(images).slideUp(500).next().slideDown(500);
        return false;
    });
})();​

And you can see the live example here:

http://www.gloryillustration.com/tests/nodland.html

Upvotes: 2

Views: 433

Answers (2)

Mark Schultheiss
Mark Schultheiss

Reputation: 34227

I would put in a delay and fix the jump if you select the same image repeatedly.

if ($(this).parent() != $(this).next().parent())
{
    $(this).parent(images).slideUp(500).next().delay(500).slideDown(500);
}

Upvotes: 0

Dan Breen
Dan Breen

Reputation: 12934

Because the slideUp and slideDown methods are asynchronous, as soon as you call one, the next line of code is executed...aka once you slide up, you're now sliding down before the animation even finishes. Each of those methods has a callback, though, which gets called once the animation is complete. Try something like:

$('#el').slideUp(500, function() { $('#el2').slideDown(500); });

The second parameter in slideUp will be called after the 500 ms animation.

Upvotes: 3

Related Questions