jquery - 更改 DIV 大小，使用 jQuery Easing 进行平滑

Question

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

JFiddle - http://jsfiddle.net/9qbfF/
沙盒 - http://itsmontoya.com/work/playdeadcult/index.php
请随意测试表单以查看提到的 Div 调整。请使用test@test.com

如您所见，现在当 POST 成功时，Div 会捕捉到位置。我希望利用 swing Easing 效果让体验更加愉快。

我正在尝试实现 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 秒内将其从 649 增加到 842(1000ms，第二个参数)。对于此类事情来说，这是一个缓慢的过渡，但您可以通过将 1000 减少到某个较低的数字来轻松调整它。第三个参数是缓动函数。有一个可选的第四个参数，它需要一个回调函数来在动画完成后执行某些操作。

第一个参数可以包含更多内容。例如，您可以使用 {width: '842px', height: '200px', opacity: '0.0'} ，它的高度和宽度会增加，同时从起始值 80 开始淡入淡出% 不透明度到完全透明，同时顺利进行。