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

這應該擺脫跳動的問題。