アニメーションが楽になりません

Question

私のトランジションには問題があります。ここではJavaScript/jQueryの

function moveProgressBar(v, a) { 
 
    var getPercent = v/100; 
 
    var getProgressWrapWidth = $('.progress-wrap').width(); 
 
    var progressTotal = getPercent * getProgressWrapWidth; 
 
    var animationLength = a; 
 

 
    $('.progress-bar').stop().animate({ 
 
     left: progressTotal 
 
     }, animationLength, function(){ 
 

 
     if (getPercent === 1) { 
 

 
      $('.progress').css('height','auto'); 
 
      $('.progress_checkout').text('Proceed to checkout!'); 
 
     } else { 
 
      $('.progress').css('height','2rem'); 
 
      $('.progress_checkout').text(''); 
 
     } 
 
    }); 
 
}

.progress_checkout{ 
 
    text-align: center; 
 
    margin: auto 0; 
 
    display: block; 
 
    color: #fff; 
 
    font-weight: bold; 
 
    padding: 2rem 0; 
 
    transition: ease-in-out 0.6s; 
 
    font-size: 200%; 
 
} 
 

 
.progress_checkout:hover{ 
 
    background-color: white; 
 
    color: #C6DA80; 
 
    cursor: pointer; 
 
} 
 

 
.progress { 
 
    width: 100%; 
 
    height: 2rem; 
 
} 
 

 
.progress-wrap { 
 
    background: #C6DA80; 
 
    margin: 20px 0; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.progress-bar { 
 
    background: #F5F5F5; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="progress-wrap progress" data-progress-percent="0"> 
 
    <a class="progress progress_checkout"></a> 
 
    <div class="progress-bar progress"></div> 
 
</div>

である私は何をしたい、このプログレスバーがフル表示がテキストである、バーを大きくするときということです。それはありますが、アニメーションは0.5秒程度ではなく瞬間的です。 addClassとremoveClassを試してみましたが、まったく同じです。私はこれまでと変わらない可能性がある要素への移行を追加しましたが、それはまだ瞬時になります。

注：何かが見当たらない場合は、 がすべてのコードを貼り付けていない可能性がありますのでお知らせください。私に関する限り、この はあまりにもすべてのものに関連する必要がありますが、アニメーション

Answer 1

jQueryのアニメーションは、それが自分のeasing parameterだ使用しています。残念ながら、唯一のswingとlinearが用意されてい

ザ・唯一のjQueryライブラリで実装されているデフォルトと呼ばれるスイング、そして一定のペースで進行し1、と呼ばれる線形の緩和。より多くのイージング関数は、プラグイン、特にjQuery UIスイートを使用して利用できます。

Documentation。

2つのオプションがあります。

最初はCSS3 Animationsで、複数のアニメーションを時間と組み合わせることができます。だから私はクラスに戻って、CSSを使うことを提案します。

秒が緩和オプションの次のリストを持っているjQuery UIを、使用している：あなたが選択するか、または好む何

linear 
swing 
_default 
easeInQuad 
easeOutQuad 
easeInOutQuad 
easeInCubic 
easeOutCubic 
easeInOutCubic 
easeInQuart 
easeOutQuart 
easeInOutQuart 
easeInQuint 
easeOutQuint 
easeInOutQuint 
easeInExpo 
easeOutExpo 
easeInOutExpo 
easeInSine 
easeOutSine 
easeInOutSine 
easeInCirc 
easeOutCirc 
easeInOutCirc 
easeInElastic 
easeOutElastic 
easeInOutElastic 
easeInBack 
easeOutBack 
easeInOutBack 
easeInBounce 
easeOutBounce 
easeInOutBounce 

はあなた次第です。

Answer 2

助けてくれてありがとうございましたが、これが私の修正となりました。不透明度を使用し、aタグに " "が含まれていると、テキスト挿入からの突然のジャンプが回避され、遷移が滑らかになりました。

if (getPercent === 1) { 

    $('.progress').animate({height: "4rem"}, 1000); 
    $('.progress_checkout').text('Proceed to checkout!'); 
    $('.progress_checkout').animate({opacity: 1}, 800); 
} else { 
    $('.progress').animate({height: "2rem"}, 1000); 
    $('.progress_checkout').text(' '); 
    $('.progress_checkout').animate({opacity: 0}, 800); 
}