改變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平滑平滑

回答

相關問題