すたらブログ

文系Webプログラマの備忘録

jQuery: slideDown,slideUpを確実に動作させる

目次


症状

メニューの表示・非表示を切り替える際にslideDown(), .slideUp()を使っていますが、滑らかにアニメーションせずに.show(), .hide()と同じように瞬時に切り替わってしまいます。
Google検索に「jquery slideup 効かない」という候補が表示されるくらい頻繁に起こっている問題のようですが、解決策はさまざまのようです。
私の場合の解決策をメモしておきます。


私の解決策

対象の直下の子要素をアニメーションさせます。
対象要素は単純にshow, hideさせるだけです。


記述例

HTML

<a class="toggle-menu" href="#">Menu</a>
<nav class="globalnavi">
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
  </ul>
</nav>

JavaScript

$('.toggle-menu').on('click', function () {
  if ($('.globalnavi').is(':visible')) {
    // Close menu
    $('.globalnavi > *').slideUp(function () {
      $(this).parent().hide();
    });
  } else {
    // Open menu
    $('.globalnavi > *')
      .hide()
      .parent().show().end()
      .slideDown();
  }
});

解説

メニューを閉じる

普通は下記ですみます。

$('.globalnavi').slideUp();

しかし、私の場合は直下の子要素をアニメーションさせて、それが完了したら対象要素を非表示にしています。

$('.globalnavi > *').slideUp(function () {
  $(this).parent().hide();
});

メニューを開く

普通は下記ですみます。

$('.globalnavi').slideDown();

しかし私の場合は、あらかじめ直下の子要素を非表示にした上で対象要素を表示させ、さらに直下の子要素をアニメーションさせています。

$('.globalnavi > *')
  .hide()
  .parent().show().end()
  .slideDown();