jQuery анимация не работает по назначению

Question

Я пытаюсь сделать дополнение к форме, появляющейся при нажатии на кнопку. У меня есть 2 проблемы с этим: почему вначале не скрываются новые кнопки? Я попытался дать им высоту 0 и отступы и т. Д. ... И почему раскрытие новых анимаций кнопок занимает больше времени, чем остальная часть анимации?

Демонстрационный http://jsfiddle.net/mNRem/

Это мой JQuery код:

var duration = 3000; 
var showWidth = "150px"; 
var formHidden = true; 
var showHeight = $("#cancel-button").outerHeight(true)+"px"; 
var buttonPadding = $('#cancel-button').css("padding"); 
var buttonBorder = $('#cancel-button').css("border-width"); 
$('#new-name').width(0); 
$('.hidden-form').height(0); 
$('.buttons').css({padding: 0, "border-width": 0}); 
$('#change-form-button').click(function() { 
    formHidden = !formHidden; 
    var labelWidth = formHidden? "0" : showWidth; 
    var buttonWidth = formHidden? showWidth : "0"; 
    $('#new-name').animate({width: labelWidth}, duration); 
    $('#change-form-button').animate({width: buttonWidth, padding: "0", "border-width": "0"}, duration); 
    $('.hidden-form').animate({height: showHeight}, duration); 
    $('.buttons').animate({padding: buttonPadding, "border-width": buttonBorder}, duration); 
    return false; 
}); 

Answer 1

Для кнопок скрытия использовать CSS пропеллер: display: none;

Или лучше для вас JQuery выражение $ (». Кнопки). css ({display: 'none'});

Для лучшей анимации пытаются использовать .hide() и .show() функции:

$('.buttons').hide("fast"); 

А затем по щелчку

$('.buttons').show(); 

Посмотрите здесь: Example on JsFiddle