register-init.js 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. $(function() {
  2. //jQuery time
  3. var current_fs, next_fs, previous_fs; //fieldsets
  4. var left, opacity, scale; //fieldset properties which we will animate
  5. var animating; //flag to prevent quick multi-click glitches
  6. $(".next").click(function(){
  7. if(animating) return false;
  8. animating = true;
  9. current_fs = $(this).parent();
  10. next_fs = $(this).parent().next();
  11. //activate next step on progressbar using the index of next_fs
  12. $("#eliteregister li").eq($("fieldset").index(next_fs)).addClass("active");
  13. //show the next fieldset
  14. next_fs.show();
  15. //hide the current fieldset with style
  16. current_fs.animate({opacity: 0}, {
  17. step: function(now, mx) {
  18. //as the opacity of current_fs reduces to 0 - stored in "now"
  19. //1. scale current_fs down to 80%
  20. scale = 1 - (1 - now) * 0.2;
  21. //2. bring next_fs from the right(50%)
  22. left = (now * 50)+"%";
  23. //3. increase opacity of next_fs to 1 as it moves in
  24. opacity = 1 - now;
  25. current_fs.css({'transform': 'scale('+scale+')'});
  26. next_fs.css({'left': left, 'opacity': opacity});
  27. },
  28. duration: 800,
  29. complete: function(){
  30. current_fs.hide();
  31. animating = false;
  32. },
  33. //this comes from the custom easing plugin
  34. easing: 'easeInOutBack'
  35. });
  36. });
  37. $(".previous").click(function(){
  38. if(animating) return false;
  39. animating = true;
  40. current_fs = $(this).parent();
  41. previous_fs = $(this).parent().prev();
  42. //de-activate current step on progressbar
  43. $("#eliteregister li").eq($("fieldset").index(current_fs)).removeClass("active");
  44. //show the previous fieldset
  45. previous_fs.show();
  46. //hide the current fieldset with style
  47. current_fs.animate({opacity: 0}, {
  48. step: function(now, mx) {
  49. //as the opacity of current_fs reduces to 0 - stored in "now"
  50. //1. scale previous_fs from 80% to 100%
  51. scale = 0.8 + (1 - now) * 0.2;
  52. //2. take current_fs to the right(50%) - from 0%
  53. left = ((1-now) * 50)+"%";
  54. //3. increase opacity of previous_fs to 1 as it moves in
  55. opacity = 1 - now;
  56. current_fs.css({'left': left});
  57. previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
  58. },
  59. duration: 800,
  60. complete: function(){
  61. current_fs.hide();
  62. animating = false;
  63. },
  64. //this comes from the custom easing plugin
  65. easing: 'easeInOutBack'
  66. });
  67. });
  68. $(".submit").click(function(){
  69. return false;
  70. })
  71. });