JavaScript SlideUp/SlideDown making my footer jumpy after slide

Question

Can someone help me clarify where the problem is in my code.

I want to hide an element and then slideup, so the other element below it becomes visible (show) - same thing goes for slidedown.

Actually it works but it makes my footer jumpy everytime it slides, what is the solution?

var openF = $('.openForm').css('color', '#FFF');
$('#contact').hide();

$(openF).live('click', function() {
    if ($(this).val() == "Open Contact Form") {
        $(this).val("Close Contact Form");
        $('#contactDT').slideUp(200);
        $('#contact').show(200);
    } else {
        $(this).val("Open Contact Form");
        $('#contactDT').slideDown(200);
        $('#contact').hide(200);
    }
});

Answer 1

I'm not sure I fully understand your problem without seeing the HTML and CSS, but it sounds like you might have padding on the element that you are animating.

When you run your animations, they occur by continually updating the CSS height of the element. The problem is if you have padding on your element, it will skip at the end of the hide animation. (This is because even with 0 height, your element will still be the height of your padding.)

The solution for this is to apply your padding to some element inside a wrapper, where the animation will occur on the wrapper.

Answer 2

You are animating both on slideUp/slideDown and show/hide with 200 milliseconds each. That is why the jumpy effect. Don't pass the value 200 to show/hide functions.

Change this...

if ($(this).val() == "Open Contact Form") {
    $(this).val("Close Contact Form");
    $('#contactDT').slideUp(200);
    $('#contact').show(200);
} else {
    $(this).val("Open Contact Form");
    $('#contactDT').slideDown(200);
    $('#contact').hide(200);
}

to...

if ($(this).val() == "Open Contact Form") {
    $(this).val("Close Contact Form");
    $('#contactDT').slideUp(200);
    $('#contact').show();
} else {
    $(this).val("Open Contact Form");
    $('#contactDT').slideDown(200);
    $('#contact').hide();
}

This should get rid of the jumpy issue.