javascript - 避免对 slideDown 产生奇怪的影响

Question

在我的应用程序中，使用 slideDown() 会产生非常丑陋的副作用。单击元素时，一段内容将附加到祖先。副作用是点击的按钮跳到右边，左边的两个按钮移动了两个。我只希望按钮组保持不动。

在这里，只需单击黄色刷新按钮:jsfiddle

$(document).on('click', '#counter-offer', function(e) {
    e.preventDefault();
    var thiz = $(this);
    var element = thiz.closest('#negotiation-buttons').find('div#counter-offer-form-container')
    $.get('/negotiation/counter_offer_form', $(this).find('form').serialize(), function(data) {
        if (element.length) {
            element.slideUp('200', function() {
                element.remove();
            });
        }  else {
            thiz.closest('#negotiation-buttons').append(data['form']).
            find('#counter-offer-form-container').hide().slideDown(400);
        }
    });
});

我不知道如何避免这种情况。有什么想法吗？

Answer 1

一种解决方案是设置一个固定大小的容器

#negotiation-buttons {
    width: 300px;
}

http://jsfiddle.net/0m4qq484/5/