Question

I’ve been reading up on the Easing function on the jQuery website. My intended goal is to smooth out a Div adjustment which occurs when a form is submitted.

JFiddle – http://jsfiddle.net/9qbfF/
Sandbox – http://itsmontoya.com/work/playdeadcult/index.php
Feel free to test the form to see the Div adjustment mentioned. Please use [e-mail]

As you see, right now the Div snaps to place when the POST is successful. I’m hoping to use the swing Easing effect to make the experience more pleasant.

I was playing around with implementing Easing and felt as if I was messing up completely. I took the test code out so it was a cleaner environment for someone to assist me in :).

I appreciate the help!

Answer 1

If I understand correctly, you’ll probably want to replace this:

$('#myForm').ajaxForm(function() { 
  document.getElementById('formFill').style.visibility = 'hidden';
  document.getElementById('joinDiv').style.width = '842px';
  $("#joinText").html( 'Thank you for signing up!');
}); 

with this:

$('#myForm').ajaxForm(function() { 
  document.getElementById('formFill').style.visibility = 'hidden';
  $("#joinText").html( 'Thank you for signing up!');
  $('#joinDiv').animate({width: '842px'}, 1000, 'swing');
});

The first parameter to animate is a hash that describes the “end state” where you want to end the animation. Looks like your joinDiv is 649px or whatever, so that animate call will grow it from 649 to 842 over the course of 1 second (1000ms, 2nd parameter). That’s kind of a slow transition for this type of thing, but you can easily tweak it by reducing 1000 to some lower number. The 3rd parameter is the easing function. There’s an optional 4th parameter that takes a callback function to do something after the animation completes.

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.