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，你的元素仍然是你填充的高度。）

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

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

这应该摆脱这个棘手的问题。

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

2 个答案: