jump on slideUp jQuery

Question

Materializecssを使ってマテリアルデザインのStepperを作成しようとしていますが、私はほとんどそこにいますが、各ステップでslideUpアニメーションに奇妙な問題があります。
ちょうど終了するときに突然ジャンプがあります。あなたが見ることのために私はjsFiddleを用意し、私もここでコードを書いている：

https://jsfiddle.net/c3xLwzru/

HTML：（Materializecssへの追加）

<div class="row"> 
    <div class="col l8 m10 s12 offset-l2 offset-m1"> 
     <h3 class="light center-align purple-text text-darken-4">Subscription</h3> 
     <div class="card"> 
      <div class="card-content"> 

       <ul class="stepper"> 
       <li class="step"> 
        <div class="step-title waves-effect waves-dark"><div class="number">1</div>Step 1</div> 
        <div class="step-content"> 
         Example 1 
         <div class="step-actions"> 
          <button class="waves-effect waves-dark btn" type="submit">SEGUINTE</button> 
         </div> 
        </div> 
       </li> 
       <li class="step"> 
        <div class="step-title waves-effect waves-dark"><div class="number">2</div>Step 2</div> 
        <div class="step-content"> 
         Example 2 
        </div> 
       </li> 
       <li class="step"> 
        <div class="step-title waves-effect waves-dark"><div class="number">3</div>Step 3</div> 
        <div class="step-content"> 
         Example 3 
        </div> 
       </li> 
       </ul> 

      </div> 
     </div> 
    </div> 
    </div> 

CSS：

を

ul.stepper { 
    max-width: 800px; 
} 

.step:not(:last-child) { 
    position: relative; 
    margin-bottom: 24px; 
} 

.step:not(:last-child).active { 
    margin-bottom: 36px; 
} 

.step-title { 
    margin: 0 -20px; 
    cursor: pointer; 
    margin-bottom: 8px; 
    padding: 12px 44px 24px 20px; 
    display: block; 
} 

.step-title:hover { 
    background-color: #F0F0F0; 
} 

.step.active .step-title { 
    font-weight: 500; 
} 

.step-title .number { 
    margin-right: 10px; 
    display: inline-block; 
    height: 28px; 
    width: 28px; 
    color: white; 
    background-color: rgba(0,0,0,0.3); 
    border-radius: 50%; 
    text-align: center; 
    line-height: 28px; 
    font-weight: 400; 
} 

.step.active .number { 
    background-color: #9C27B0; 
} 

.step-content { 
    display: none; 
    height: calc(100% - 132px); 
    width: inherit; 
    overflow: auto; 
    margin-left: 41px; 
    margin-right: 24px; 
} 

.stepper>.step:not(:last-child)::after { 
    content: ''; 
    position: absolute; 
    top: 50px; 
    left: 13.5px; 
    width: 1px; 
    height: calc(100% - 24px); 
    background-color: rgba(0,0,0,0.1); 
} 

.stepper>.step.active:not(:last-child)::after { 
    height: calc(100% - 12px); 
} 

.step-actions { 
    display: none; 
    padding-top: 16px; 
    margin-right: 24px; 
} 

.step.active .step-actions { 
    display: block; 
} 

jQueryを使用して：

$(document).on("click", '.stepper .step-title:not(.active)', function() { 
    $(this).parent().addClass('active'); 
    $(this).next().stop().slideDown('slow'); 
    $(".step.active").not($(this).parent()).find(".step-content").stop().slideUp('slow'); 
    $(".step.active").not($(this).parent()).removeClass('active'); 
}); 

私はもはや何をすべきかわかりません。私はすべてを試して、彼らがジャンプする理由を見つけることができませんでした。

お手伝いできますか？

Answer 1

マージン下を削除：8px。ステップ-タイトル上とマージントップを追加します：8pxへ。ステップ・コンテンツ。

突然ジャンプを停止する必要があります。