Grow your CSS skills. Land your dream job.

jQ: slideToggle animation skips/jumps

  • # January 9, 2009 at 8:06 am

    Hi all,

    I’ve written a short accordion-like script to show/hide an element on click. The problem is the slideToggle animation skips just before completion rendering it very ‘unsmooth’. The slideUp seems to work just fine.

    It seems to be the same across all browsers I’ve tested. At first I thought it would be fixed by removing all padding but didn’t seem to fix it.

    It can be seen here: http://lyf.dk/t/slide and the script is like this:

    Quote:
    $(document).ready(function() {
    $(‘div.news> div’).hide();
    $(‘div.news> h3′).click(function() {
    $(‘.news h3′).removeClass(‘on’);
    $(this).addClass(‘on’)
    .next(‘div’).slideToggle(’10000′)
    .siblings(‘div:visible’).slideUp(’10000′);
    });
    });

    Thanks in advance,
    Oskar

    uba
    # January 10, 2009 at 6:41 am

    have you tried increasing the animation time?

    Rob
    # January 10, 2009 at 8:11 am

    there be an .accordian function you know?

    http://docs.jquery.com/UI/Accordion

    Maybe that would help more? :D

    # January 19, 2010 at 3:38 am

    I’ll tell you what, it took me 2 days of critical thinking and LOTS of trial and error, but I finally solved this problem. I’ve had the same issue. The answer is NOT the famous padding issue that makes it jump. Through some research I believed that to have been solved on jQuery 1.3.2 or something.

    The problem is with the width. ANY time the element .slideToggle( ) is attached to has a width it’ll skip/jump the ending. How much it does depends on the width. The narrower the width, the more the jump. Anyways, long story short, by adding position:relative onto the div the sliding element is in, it’ll reset the width as far as .slideToggle( ) is concerned and will no longer jump.

    I have already tested this on your link, and it fixes the entire issue. Congrats.

    I am particularly proud of this solve. I put a lot of work into it. My first big issue since I started learning jquery a couple weeks ago.

    Rob
    # January 19, 2010 at 4:45 am

    Well done Noah :D

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".