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/