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 高度而发生。 问题是如果你的元素上有填充，它会在隐藏 animation 的末尾跳过。（这是因为即使高度为 0，你的元素仍然是填充的高度。）

解决方案是将填充应用于包装器内的某个元素，其中 animation 将出现在包装器上。

Answer 2

您在 slideUp/slideDown 和 show/hide 上分别设置了 200 毫秒的动画。 这就是跳跃效应的原因。 不要将值200传递给显示/隐藏函数。

改变这个...

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

到...

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

这应该摆脱跳动的问题。