改变DIV大小，平滑与jQuery Easing

Question

我一直在阅读jQuery网站上的Easing函数。我的预期目标是平滑提交表单时发生的Div调整。

JFiddle ——http://jsfiddle.net/9qbfF/
沙盒 - http://itsmontoya.com/work/playdeadcult/index.php
可以随意测试表单，看看上面提到的Div调整。请使用[e-mail]

如您所见，当POST操作成功时，Div就会自动定位。我希望使用摇摆舒缓效果，使体验更愉快。

我正在尝试执行Easing，感觉好像我完全搞砸了。我把测试代码拿出来，所以它是一个更干净的环境，有人来协助我:)。

我很感激你的帮助!

Answer 1

如果我理解正确的话，您可能想要替换这个:

$('#myForm').ajaxForm(function() { 
  document.getElementById('formFill').style.visibility = 'hidden';
  document.getElementById('joinDiv').style.width = '842px';
  $("#joinText").html( 'Thank you for signing up!');
}); 

与这个:

$('#myForm').ajaxForm(function() { 
  document.getElementById('formFill').style.visibility = 'hidden';
  $("#joinText").html( 'Thank you for signing up!');
  $('#joinDiv').animate({width: '842px'}, 1000, 'swing');
});

animate的第一个参数是描述你想要结束动画的"结束状态"的哈希值。看起来你的joinDiv是649px或其他什么，所以animate调用将在1秒(1000ms，第二个参数)的过程中从649增加到842。对于这种类型的东西来说，这是一个缓慢的转变，但你可以通过将1000减少到更低的数字来轻松地调整它。第三个参数是缓动函数。还有一个可选的第四个参数，它接受一个回调函数，在动画完成后做一些事情。

第一个参数可以包含更多的内容。例如，你可以有{width: '842px', height: '200px', opacity: '0.0'}，它会在高度和宽度上增长，同时从初始值的80%不透明度逐渐淡出到完全透明，所有这些都是平滑的。