JQuery - 様々な視覚効果

CSSによる設定

CSSのvisibility属性

CSSのvisibility属性の値をvisible/hiddenと切り替えることで 要素の可視／不可視を切り替えられる。

visibility: visible/hidden


$('#visible').on('click', () => { $('#visibility').css('visibility', 'visible'); });
$('#hidden').on('click', () => { $('#visibility').css('visibility', 'hidden'); });

jQueryネイティブによる方法

JQueryネイティブで、要素の可視／不可視を設定したりトグルで切り替える メソッドが準備されている。

show/hide/toggle

show()/hide()メソッドは動的なアニメーションで要素をの可視・不可視を切り替える。 アニメーションは、chromeでは要素の左上隅を中心とした拡大／縮小。

show/hide


$('#show').on('click', () => { $('#show_hide').show(1000); });
$('#hide').on('click', () => { $('#show_hide').hide(1000); });
$('#toggle').on('click', () => { $('#show_hide').toggle(1000); });

slideDown/slideUp/toggleSlide

slide系のメソッドは縦方向のスライドで要素をの可視・不可視を切り替える。

slide down/slide up


$('#slide_down').on('click', () => { $('#slide').slideDown(1000); });
$('#slide_up').on('click', () => { $('#slide').slideUp(1000); });
$('#slide_toggle').on('click', () => { $('#slide').slideToggle(1000); });

fadeIn/fadeOut/fadeToggle

fade系のメソッドは縦方向のスライドで要素をの可視・不可視を切り替える。

fade in/fade out


$('#fade_in').on('click', () => { $('#fade').fadeIn(1000); });
$('#fade_out').on('click', () => { $('#fade').fadeOut(1000); });
$('#fade_toggle').on('click', () => { $('#fade').fadeToggle(1000); });