Advertisement
Guest User

index.js

a guest
Mar 20th, 2017
140
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  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.  
  7. $(".next").click(function(){
  8.     if(animating) return false;
  9.     animating = true;
  10.    
  11.     current_fs = $(this).parent();
  12.     next_fs = $(this).parent().next();
  13.    
  14.     //activate next step on progressbar using the index of next_fs
  15.     $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
  16.    
  17.     //show the next fieldset
  18.     next_fs.show();
  19.     //hide the current fieldset with style
  20.     current_fs.animate({opacity: 0}, {
  21.         step: function(now, mx) {
  22.             //as the opacity of current_fs reduces to 0 - stored in "now"
  23.             //1. scale current_fs down to 80%
  24.             scale = 1 - (1 - now) * 0.2;
  25.             //2. bring next_fs from the right(50%)
  26.             left = (now * 50)+"%";
  27.             //3. increase opacity of next_fs to 1 as it moves in
  28.             opacity = 1 - now;
  29.             current_fs.css({
  30.         'transform': 'scale('+scale+')',
  31.         'position': 'absolute'
  32.       });
  33.             next_fs.css({'left': left, 'opacity': opacity});
  34.         },
  35.         duration: 800,
  36.         complete: function(){
  37.             current_fs.hide();
  38.             animating = false;
  39.         },
  40.         //this comes from the custom easing plugin
  41.         easing: 'easeInOutBack'
  42.     });
  43. });
  44.  
  45. $(".previous").click(function(){
  46.     if(animating) return false;
  47.     animating = true;
  48.    
  49.     current_fs = $(this).parent();
  50.     previous_fs = $(this).parent().prev();
  51.    
  52.     //de-activate current step on progressbar
  53.     $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
  54.    
  55.     //show the previous fieldset
  56.     previous_fs.show();
  57.     //hide the current fieldset with style
  58.     current_fs.animate({opacity: 0}, {
  59.         step: function(now, mx) {
  60.             //as the opacity of current_fs reduces to 0 - stored in "now"
  61.             //1. scale previous_fs from 80% to 100%
  62.             scale = 0.8 + (1 - now) * 0.2;
  63.             //2. take current_fs to the right(50%) - from 0%
  64.             left = ((1-now) * 50)+"%";
  65.             //3. increase opacity of previous_fs to 1 as it moves in
  66.             opacity = 1 - now;
  67.             current_fs.css({'left': left});
  68.             previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
  69.         },
  70.         duration: 800,
  71.         complete: function(){
  72.             current_fs.hide();
  73.             animating = false;
  74.         },
  75.         //this comes from the custom easing plugin
  76.         easing: 'easeInOutBack'
  77.     });
  78. });
  79.  
  80. $(".submit").click(function(){
  81.     return false;
  82. })
Advertisement
RAW Paste Data Copied
Advertisement