一定以上縦幅がある時アコーディオンの速度設定について

Question

https://style01.net/1245/
こちらのデモのアコーディオンが開く(moreが開く速度)速度設定をしたいのです。
JSのどこに どのようなものを記述すれば良いでしょうか。

 <div class="block">
      <div class="box">
        <div class="box-inner">
                box-innerの縦幅が180pxを超えるとmoreが出現する<br>
                テキスト<br>
                テキスト<br>
                テキスト<br>
                テキスト<br>
                テキスト<br>
                テキスト<br>
                テキスト<br>
                テキスト<br>
                テキスト<br>
                テキスト<br>
                テキスト<br>
        </div>
      </div>
    </div>
    <div class="block">
      <div class="box">
        <div class="box-inner">
                縦幅180pxを超えない場合は出ない
        </div>
      </div>
    </div>

.block{
    margin-bottom: 30px;
}
.box{
    max-width: 600px;
    margin: 0 auto;
    background: #ddd;
  overflow: hidden;
}
.box-inner{
    padding: 10px 20px;
}
.more{
  height: 55px;
    line-height: 55px;
  margin-top: -25px;
  text-align: center;
    color: #2e9ce5;
    cursor: pointer;

  background: rgba(255,255,255,0);
  background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 31%, rgba(255,255,255,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(0%, rgba(255,255,255,0)), color-stop(31%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 31%, rgba(255,255,255,1) 100%);
  background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 31%, rgba(255,255,255,1) 100%);
  background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 31%, rgba(255,255,255,1) 100%);
  &:after{
    content:'↓';
        display: inline-block;
        font-weight: bold;
        font-size: 18px;
        -webkit-transition: .3s;
        transition: .3s;
  }
  &.is-active{
    &:after{
      -webkit-transform:rotate(180deg);
      transform:rotate(180deg);
    }
  }
}

$(function(){
    
    var box = $('.box');
    box.after('<div class="more">MORE</div>');
    var more = $('.more');
    
    function remClass(){
        $(this).next(more).removeClass('is-active');
    }
    function adClass(){
        $(this).next(more).addClass('is-active');
    }
    
    //forで.box-innerの高さを取得、縦幅が180pxより小さい場合.moreをhideする
    for(var i=0;i<box.length;i++){
        var boxInnerH = $('.box-inner').eq(i).innerHeight();
        if(boxInnerH<180){
            more.eq(i).hide();
        }else{
            box.eq(i).css({
                height:'180px'
            });
        }
    }
    
    more.on('click',function(){
        
        //複数あった時を考慮
        //クリックした.moreに対応する.box-innerの高さを取得する
        var index = more.index(this);
        var boxThis = box.eq(index);
        var innerH = $('.box-inner').eq(index).innerHeight();
        
        if($(this).hasClass('is-active')){
            boxThis.animate({
                height:'180px'
            },200,remClass);
        }else{
            boxThis.animate({
                height:innerH
            },200,adClass);
        }
    });
});

Answer 1

JSの以下の部分で開閉のアニメーションの動きが定義されています。

        if($(this).hasClass('is-active')){
            boxThis.animate({
                height:'180px'
            },200,remClass);
        }else{
            boxThis.animate({
                height:innerH
            },200,adClass);
        }

「200」が速度を決める数字です。200ミリ秒かけてその動きをするということです。この数字を小さくすれば素早く、大きくすればゆっくり動くようになります。

参考
http://js.studio-kingdom.com/jquery/effects/animate

Comments

[muso]

ご回答ありがとうございます!こちらでうまく設定できました！
助かりました！！

ありがとうございました！！

Answer 2

JSではないですが、

.box{
transition: "好みの数字"s;
}

を入れると調整できるんじゃないかと思いますがこちらで如何でしょうか？

Comments

[muso]

ご回答ありがとうございます!こちらでも調節かのうでした！
貴重なご意見ありがとうございます！