1

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 test@test.com

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!

Josh
  • 59
  • 1
  • 1
  • 8
  • the form just submits (no ajax) and console says "Uncaught ReferenceError: validate is not defined" – Andy Aug 22 '11 at 21:49
  • Sorry about that! I removed all the validation stuff to keep the topic pin-pointed. I forgot to remove the validation line in the aJax. Try again and it should work fine. – Josh Aug 22 '11 at 21:53

1 Answers1

3

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.

ethan
  • 156
  • 4
  • You explained this AMAZING. I'm going to put this into work right now and see how it turns out. You definitely aided me in fixing the remaining grey areas I had after reading the jQuery documentation. – Josh Aug 23 '11 at 03:30
  • I may have implemented it incorrectly. It seems to be breaking the aJax because now you get the blank success page. Do you mind seeing if I did something wrong? **Note** I tried this with three }); and two. – Josh Aug 23 '11 at 03:39
  • Oops, there wasn't supposed to be a } after 'swing' at all. Does that fix it? – ethan Aug 23 '11 at 22:26
  • Ethan - You rock my friend. I really appreciate the help :). – Josh Aug 24 '11 at 21:25