jQuery动画不能按预期工作

Question

我试图在点击一个按钮时出现一个表单。我有两个问题：为什么新开始的按钮没有完全隐藏？我试图给他们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