jQueryの.animate()のカクツキに関して

animeteのカクツキを修正したいです

HTMLにてdlのリストを作成し、jsにてanimateをかけましたが動作にカクツキ？があります。
修正点のご教授をお願いいたします。
以下HTMLとjsのコードになります。

html
1<div class="question-contents">
2    <dl>
3       <dt><i class="far fa-question-circle"></i><a href="#ques-1">sample1</a></dt>
4       <dd id="ques-1">sample-text1</dd>
5
6       <dt><i class="far fa-question-circle"></i><a href="#ques-2">sample2</a></dt>
7       <dd id="ques-2">sample-text2</dd>
8    </dl>
9</div>

javascript
1$(function(){
2  $('.question-contents dd:not(:nth-of-type(1))').hide();
3
4  $('.question-contents dt a').on('click', function(){
5
6    $('.question-contents dt').next().css('text-decoration', 'none');
7    $(this).css('text-decoration', 'underline');
8
9    $($(this).attr('href')).animate({
10      'height': 'toggle'
11    }, 200);
12
13    return false;
14  });
15});
16

大変申し訳ありませんでした。
環境は
・端末 / PC(windows)
・ブラウザ / Chrome(バージョンは最新の72.0.3626.109になります)
・jQuery / 3.3.1
となります。

x_x

2019/02/19 08:30

確認している環境は何でしょうか？

miyabi_pudding

2019/02/19 08:43

x_xさんのおっしゃる通り、かくついてしまった、ブラウザ、PCないしモバイル端末のOS、など記載してください。

miyabi-sun

2019/02/19 10:15 編集

今回の質問はjQueryのバージョンが超重要なので、 jQueryのバージョンも書いてくださいね。可能性としての話なら、最新のjQueryに変更するだけで解決する可能性もあります。

行動規範の内容に同意します

回答1件

ベストアンサー

animateしてますがやっているのはslide処理？

javascript
1<script>
2$(function(){
3  $('.question-contents dd:not(:eq(0))').hide();
4  $('.question-contents dt a').on('click', function(e){
5    e.preventDefault();
6    $(this).closest('dt').next('dd').slideToggle(200);
7  });
8});
9</script>
10<div class="question-contents">
11    <dl>
12       <dt><i class="far fa-question-circle"></i><a href="#ques-1">sample1</a></dt>
13       <dd id="ques-1">sample-text1</dd>
14       <dt><i class="far fa-question-circle"></i><a href="#ques-2">sample2</a></dt>
15       <dd id="ques-2">sample-text2</dd>
16    </dl>
17</div>
18