読者です 読者をやめる 読者になる 読者になる

ITの隊長のブログ

ITの隊長のブログです。いや、まだ隊長と呼べるほどには至っていないけど、日々がんばります。CakePHPとPlayFrameworkを使って仕事しています。最近はAngular2をさわりはじめたお(^ω^ = ^ω^)

【jQuery】表示するコンテンツの量が多い場合は、toggleのアニメーションはslideじゃなくてfadeがいいと思う

JavaScript jQuery

スポンサードリンク

長いタイトルだけど短く。

アコーディオンを適応するコンテンツの量が多い場合、slideToggle()を使うとなんか「...パッ!」みたいな感じで表示されるのでかっこ良くない。

恐らくコンテンツ量にスライドのアニメーションがあまりにも速くなったせいだと思うが、ならばとslideToggle('slow')にしても見た目変わらず。

そういう場合はスライドは捨ててフェードにしちゃいなよ。

下のコードは対象のhtmlクラスにホバーしたら表示させたい.accordion-bodyをフェードイン・アウトさせる。

$(function() {
    $('.accordion').hover(function(){
        $(this).stop().toggleClass('active');
        $(this).find('.accordion-body').stop().fadeToggle('slow');
    },function() {
        $(this).stop().toggleClass('active');
        $(this).find('.accordion-body').stop().fadeToggle('slow');
    });
});

当たり前だがスライドみたいな機敏さは感じられないが、多少ましになったかなとは思う。