元素之間的平滑過渡

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

    }); 

});