元素之间平滑过渡

Question

I had a go at writing some jquery that I plan to use on a multi step form. It works but the transitions are glitchy.

If I just go back and forth between 1 & 2 then it seems ok but if I go 1-3 then go in reverse it doesn't work as expected. Sometimes click doesn't register and it all seems to get out of timing.

What is a better approach here to make this look consistent?

 $(function() { $('.next-form').click(function() { current_fs = $(this).parent(); next_fs = $(this).parent().next(); $(current_fs).animate({ opacity: 0 }, "fast", function() { $(this).hide(); }); $(next_fs).css({ position: 'absolute', left: '100%', top: 0 }); $(next_fs).show(function() { $(this).animate({ left: 0 }) }); }); $('.previous-form').click(function() { current_fs = $(this).parent(); previous_fs = $(this).parent().prev(); $(current_fs).animate({ left: '100%' }, function() { $(this).hide(); }); $(previous_fs).show(function() { $(this).animate({ opacity: 100 }, 2000); }) }); }); 

 .outer{ position: relative; width: 500px; height: 50px; overflow: hidden; } .one{ width: 500px; background-color: #000; height: 50px; } .two{ width: 500px; background-color: blue; height: 50px; display: none; } .three{ width: 500px; background-color: red; height: 50px; display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <div class="outer"> <div class="one"> <button type="button" class="next-form" >Next</button> </div> <div class="two"> <button type="button" class="previous-form" >Previous</button> <button type="button" class="next-form" >Next</button></div> <div class="three"><button type="button" class="previous-form">Previous</button></div> </div> 

Answer 1

I fixed it by adding stop()

$(function() {
  $('.next-form').click(function() {

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    $(current_fs).stop();
    $(next_fs).stop();

    $(current_fs).animate({
      opacity: 0
    }, "fast", function() {
      $(this).hide();
    });
    $(next_fs).css({
      position: 'absolute',
      left: '100%',
      top: 0
    });

    $(next_fs).show(function() {
      $(this).animate({
        left: 0
      })
    });

  });

  $('.previous-form').click(function() {

    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();

    $(current_fs).stop();
    $(next_fs).stop();

    $(current_fs).animate({
      left: '100%'
    }, function() {
      $(this).hide();
    });
    $(previous_fs).show(function() {
      $(this).animate({
        opacity: 100
      }, 2000);
    })

  });

});