title: Multi-step form in animated div/fieldset
body: <p>I have created a step-by-step walkthrough. Each step is enclosed in a separate "fieldset", and the whole is a single .html file.</p>
  
  <p>To move forward and back I use javascript.
  The problem is that over time, animations are beginning to lag.</p>
  
  <p>In the attached example everything works smoothly, because there is little content.
  Where is the problem with optimization?</p>
  
  <p><a href="http://jsfiddle.net/venntr/1x183c2t/9/" rel="nofollow noreferrer">JsFiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;form id="msform"&gt;
               &lt;fieldset id="firstField"&gt;   
                        &lt;input type="button" name="subject1" class="next action-button" value="Subject1 /&gt;
  &lt;input type="button" name="subject2" class="next action-button" value="Subject2 /&gt;
  &lt;input type="button" name="subject3" class="next action-button" value="Subject3 /&gt;
               &lt;/fieldset&gt;
               &lt;fieldset id="subject1"&gt;
              &lt;h2&gt;Some text&lt;/h2&gt;
              &lt;input type="button" name="prev" class="back action-button" value="Back" /&gt;
              &lt;input type="button" name="previous" class="previous action-button" value="Reset" /&gt;
           &lt;/fieldset&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>  var current_fs, next_fs, previous_fs, back_fs;
       var left, opacity, scale;
       var animating;
       var progress = [];
       var message = "Funkcja niedostępna.";
       $(".next").click(function() {
           if (animating) return false;
           animating = true;
           current_fs = $(this).parent();
           next_fs = $('#' + $(this).attr('name'));
  
           $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
           progress.push($('fieldset:visible'));
  
           next_fs.show();
           current_fs.animate({
               opacity: 0
           }, {
               step: function(now, mx) {
                   scale = 1 - (1 - now) * 0.2;
                   left = (now * 50) + "%";
                   opacity = 1 - now;
                   next_fs.css({
                       'left': left,
                       'opacity': opacity
                   });
               },
               duration: 800,
               complete: function() {
                   current_fs.hide();
                   animating = false;
               },
               easing: 'easeInOutBack'
           });
       });
       $(".previous").click(function() {
           if (animating) return false;
           animating = true;
           current_fs = $(this).parent();
           previous_fs = $('#firstField');
  
           $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
  
           previous_fs.show();
           current_fs.animate({
               opacity: 0
           }, {
               step: function(now, mx) {
                   scale = 0.8 + (1 - now) * 0.2;
                   left = ((1 - now) * 50) + "%";
                   opacity = 1 - now;
                   current_fs.css({
                       'left': left
                   });
                   previous_fs.css({
                       'transform': 'scale(' + scale + ')',
                       'opacity': opacity
                   });
               },
               duration: 800,
               complete: function() {
                   current_fs.hide();
                   animating = false;
               },
               easing: 'easeInOutBack'
           });
       });
       $(".back").click(function() {
           if (animating) return false;
           animating = true;
           current_fs = $(this).parent();
           $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
  
           back_fs = progress.pop();
           back_fs.show();
           current_fs.animate({
               opacity: 0
           }, {
               step: function(now, mx) {
                   scale = 0.8 + (1 - now) * 0.2;
                   left = ((1 - now) * 50) + "%";
                   opacity = 1 - now;
                   current_fs.css({
                       'left': left
                   });
                   back_fs.css({
                       'transform': 'scale(' + scale + ')',
                       'opacity': opacity
                   });
               },
               duration: 800,
               complete: function() {
                   current_fs.hide();
                   animating = false;
               },
               easing: 'easeInOutBack'
           });
       });
  </code></pre>