1

有人可以帮我澄清我的代码中的问题所在。

我想隐藏一个元素然后向上滑动，因此它下面的另一个元素变得可见（显示）-向下滑动也是如此。

实际上它有效，但每次滑动时都会让我的页脚跳动，解决方案是什么？

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

2 回答 2

0

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

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

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

于 2012-04-09T18:12:44.720 回答
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);
}

至...

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

这应该摆脱跳动的问题。

于 2012-04-10T00:45:34.020 回答