IE11でjQueryのslideDownがちらつく

前提・実現したいこと

HTML5 + javascriptで、ボタン押下時にtableに行を追加するという処理を実装しようとしています。

その際にアニメーションさせるべく、jQueryのslideDownを使用しているのですが、
IE11で実行した場合のみ表示が一瞬ちらついてしまいます。
（正確には、要素が一瞬表示される→slideDownが開始される）

下記のソースコードのようにname指定で2項目以上を同時にslideDownすると再現します。
1項目のみの場合や、slideUpでは再現しません。

これはIE11のバグでしょうか？

解決法をご存知の方がおられましたら、ご教示いただけると幸いです。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
5<script type="text/javascript"> 
6  function add(){
7    $("[name=panel]").slideDown("slow");
8  }
9  function remove(){
10    $("[name=panel]").slideUp("slow");
11  }
12</script>
13</head>
14<body>
15<button type="button" onclick="add();">add</button>
16<button type="button" onclick="remove();">remove</button>
17<table>
18  <tr>
19    <td>1-1</td>
20    <td>1-2</td>
21    <td>1-3</td>
22  </tr>
23  <tr>
24    <td><div name="panel" style="display:none;">2-1</div></td>
25    <td><div name="panel" style="display:none;">2-2</div></td>
26    <td><div name="panel" style="display:none;">2-3</div></td>
27  </tr>
28</table>
29</body>
30</html>
31
32

試したこと

・firefoxで表示　→　〇（正常に動作）
・slideToggleに変更　→　×
・animateに変更　→　×
・fadeInに変更　→　×

補足情報

OS:Windows10
ブラウザ:InternetExplorer11

m.ts10806

2019/02/21 08:07

IEはマイクロソフトの開発者が「今後は使うな｣的な発言をしていましたが、それでも対応をしていく必要があるものでしょうか？

Lucky777

2019/02/21 08:48

一プログラマとしては早々に切り替えていくべきだと思いますが、一個人としてはお金がもらえる限り何でもやります。笑それと別に、プログラマのプライドとして「できません」と簡単に言いたくないのもあります。（ここで質問しておいて言うことじゃないですが・・・笑）

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

回答1件

ベストアンサー

ちゃんとやるならtrの出し入れも必要では？
IE11だとjQuery3系はきついかも

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script> 
3$(function(){
4  $('#add').on('click',function(){
5    $("[name=panel]").closest('tr').show().end().slideDown("slow");
6  });
7  $('#remove').on('click',function(){
8    $("[name=panel]").slideUp("slow").delay("slow").queue(function(){$(this).closest('tr').hide();}).dequeue();
9  });
10});
11</script>
12<button type="button" id="add">add</button>
13<button type="button" id="remove">remove</button>
14<table border>
15  <tr>
16    <td>1-1</td>
17    <td>1-2</td>
18    <td>1-3</td>
19  </tr>
20  <tr style="display:none;">
21    <td><div name="panel" style="display:none;">2-1</div></td>
22    <td><div name="panel" style="display:none;">2-2</div></td>
23    <td><div name="panel" style="display:none;">2-3</div></td>
24  </tr>
25</table>

投稿2019/02/21 09:37

yambejp

総合スコア114833

Lucky777

2019/02/21 11:07

そのままコピーして埋め込んでみたところ、問題なく動作しました！ >>IE11だとjQuery3系はきついかもそうなんですか！ jQueryのバージョンは盲点でした・・・。たしかに、jQueryの参照先を3.3.1に変えると同様にちらつきますね。今のところjQuery3系でないといけない理由もないので、この方法で対処させていただきます。ご教示いただき誠にありがとうございました。<(_ _)>

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