改变DIV大小，用jQuery平滑平滑

我一直在阅读jQuery网站上的Easing函数。我希望的目标是消除表单提交时发生的Div调整。改变DIV大小，用jQuery平滑平滑

JFiddle - http://jsfiddle.net/9qbfF/
沙盒 - http://itsmontoya.com/work/playdeadcult/index.php
随意测试的形式，看看提到的股利调整。请使用[email protected]

正如您所看到的，现在当Div成功发布时，Div会快照到位。我希望使用挥杆缓和效果，让体验更愉快。

我一直在玩着实施Easing，觉得自己好像完全搞砸了。我把测试代码拿出来，所以这是一个更清洁的环境，让有人帮助我:)。

我很感激帮助！

来源

2011-08-22 Josh

表单只提交（没有ajax）和控制台说“未捕获的ReferenceError：验证未定义” – Andy

对不起！我删除了所有验证内容，以保持主题的针对性。我忘了删除aJax中的验证行。再试一次，它应该可以正常工作。 – Josh

如果我理解正确的话，你可能会想取代这个：

$('#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％不透明度的初始值逐渐消失为完全透明。

来源

2011-08-23 01:23:59 ethan

你解释了这个惊人的。我现在要把它变成现实，看看它是如何变成现实的。您肯定帮助我修复了阅读jQuery文档后所剩下的灰色区域。 – Josh

我可能执行不正确。它似乎打破了AJ，因为现在你获得了空白的成功页面。如果我做错了什么，你介意看看吗？ **注**我用三个}）尝试了这个;和两个。 – Josh

糟糕，在'摆动'之后根本不应该是一个}。它解决了吗？ – ethan

改变DIV大小，用jQuery平滑平滑

回答

相关问题