私が正しく理解していれば、おそらくこれを置き換えたいと思うでしょう:
$('#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、2番目のパラメーター)。これは、この種の移行には少し時間がかかりますが、1000を少し少なくすることで、簡単に微調整できます。3番目のパラメーターはイージング機能です。アニメーションの完了後にコールバック関数を使用して何かを実行するオプションの4番目のパラメーターがあります。
最初のパラメーターには、さらに多くのものを含めることができます。たとえば、{width: '842px', height: '200px', opacity: '0.0'}
不透明度が80%の開始値から完全に透明になるまで、すべて同時にスムーズにフェードしながら、高さと幅が大きくなる可能性があります。