JavaScript SlideUp/SlideDown使我的页脚在幻灯片后跳动

有人能帮我澄清代码中的问题在哪里吗

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

事实上，它是有效的，但每次它滑动时，我的页脚都会跳起来，解决办法是什么

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

---

在没有看到HTML和CSS的情况下，我不确定我是否完全理解您的问题，但听起来您可能在正在制作动画的元素上添加了填充

当您运行动画时，它们是通过不断更新元素的CSS高度来实现的。问题是，如果元素上有填充，它将在隐藏动画结束时跳过。这是因为即使高度为0，元素仍然是填充的高度

---

解决方法是将填充应用到包装器中的某个元素，动画将在包装器上出现。

您正在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);
}

到

---

这应该可以解决这个棘手的问题。

不需要$openF-openF已经是一个jQuery对象。使用代码链接到外部站点对于问答平台没有帮助。试着在你的问题中加入相关的代码。Guido我确实在幻灯片事件中加入了上面的代码，这让我的页脚很紧张，我想查看源文件可能会更快。好的，请从这里开始查看。我懂了。您看到联系人页面按钮了吗？单击时页脚是如何跳转的？在“关于”页上似乎还可以。我很困惑。不，页面显示完全没有样式，因为您的CSS文件被我的工作代理阻止。如果你能设置一个JSFIDLE演示，我可以看看那里；否则，没有互联网限制的其他人可能会很有希望地确认。好的，看一看这里：它似乎在这里工作得很好，没有问题。也许我会等待有人检查主web链接。非常感谢您的时间谢谢Neo108但它并没有解决问题。。。问题可能来自我的CSS吗。。。我还准备了一些关于SlideDown jumpy的问题。我在我的电脑上复制了这个问题，当我按照我的建议做的时候，它起了作用。也许我没有正确理解你的问题。是否希望在联系人窗体打开/关闭时页脚保持固定？也就是说，无论联系人表单是打开还是关闭，内容部分的高度都是相同的？是的，正是。。。我对我的内容使用100%高度和100%最小高度。我的页脚没有任何东西。我希望它在打开时向下伸展，在关闭时调整大小。现在它只是在调整大小时不断反弹。从这里可以看到：www.charlesmudy.com/work/charlesmudy/contact.phpOk。在我做了我建议的上述更改之后，我无法复制页脚的跳跃性。我唯一能给出的另一个建议是将联系人表单包装在一个带有id contact的div中，并显示/隐藏该div。请参阅。

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