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语句$('.buttons').css({ display：'none‘})；

为了获得更好的动画效果，请尝试使用.hide()和.show()函数：

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

然后点击

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

看这里：JsFiddle上的实例