要素間のスムーズな移行

Question

私は多段階フォームで使用する予定のjqueryを書きました。それは動作しますが、トランジションはうんざりです。

私はちょうど1 & 2の間を行き来するといいですが、私が1-3に行くと、それは期待通りに動作しません。クリックが登録されず、タイミングがずれているようです。

この見た目を一貫させるためのより良いアプローチは何ですか？

$(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

私は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); 
    }) 

    }); 

});