JavaScript SlideUp/SlideDown 使我的页脚在滑动后跳动

Question

谁能帮我弄清楚问题出在我的代码中。

我想隐藏一个元素然后向上滑动，这样它下面的另一个元素就变得可见(显示)——同样的事情也适用于向下滑动。

实际上它可以工作，但是每次滑动时它都会让我的页脚跳动，有什么解决办法？

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

如果没有看到 HTML 和 CSS，我不确定我是否完全理解你的问题，但听起来你可能在你正在设置动画的元素上有填充。

当您运行动画时，它们会不断更新元素的 CSS 高度。问题是如果你的元素上有填充，它会在隐藏动画结束时跳过。 (这是因为即使高度为 0，您的元素仍将是内边距的高度。)

解决方案是将填充应用于包装器内的某个元素，动画将在包装器上发生。