1

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

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

如您所见，现在当 POST 成功时，Div 会捕捉到位置。我希望使用摇摆缓动效果来使体验更加愉快。

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

感谢您的帮助！

4

1 回答 1

3

如果我理解正确，您可能需要替换它：

$('#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（1000 毫秒，第二个参数）。对于这种类型的东西来说，这是一种缓慢的过渡，但是您可以通过将 1000 减少到某个较低的数字来轻松地对其进行调整。第三个参数是缓动函数。有一个可选的第四个参数，它在动画完成后接受一个回调函数来做某事。

The first parameter can have a bunch more stuff in it. You could have, for example, {width: '842px', height: '200px', opacity: '0.0'} and it would grow in height and width, while fading from its starting value of 80% opacity to completely transparent, all smoothly at the same time.

于 2011-08-23T01:23:59.937 回答