Question

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

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

如您所见，现在，当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减少到更低的数字来轻松调整它。第三个参数是缓动函数。有一个可选的第4个参数，它在动画完成后采用回调函数来做某事。

第一个参数可以包含更多内容。例如，你可以{width: '842px', height: '200px', opacity: '0.0'}，它会在高度和宽度上增长，同时从80％不透明度的起始值渐渐变为完全透明，同时也很平滑。

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

1 个答案: