表示中の要素を非表示にする hide()

2015年8月3日

hide()は、show()の逆の命令です。
表示されている状態(display:block)のHTML要素を
非表示(display:none)にします。

show()と同様にhide(...)の括弧内にはアニメーションの
スピードとコールバック関数を設定でき、指定した
スピードで透明度、高さ、幅を徐々に変化させながら
要素を非表示にします。

$( セレクター ).hide( スピード, コールバック関数 );

サンプルコードを実行すると分かりますが、
表示、非表示ボタンを押すと青い四角が消えたり、
現れたりしているのが分かるかと思います。

hide()はshow()と同様に、スピードの指定を省略すると
アニメーションの表示はしないで、すぐに非表示にします。

アニメーションが止まらないんだけど

サンプルコードの33行目～38行目のコードには
問題点があります。show()/hide()は１回のアニメーション処理が
終ってから次のアニメーション処理を実行するので

アニメーションの実行中に表示・非表示ボタンを素早く
連打すると、押した分だけアニメーションが行われ、
そのアニメーションが完全に終わるまで待たなければなりません。

この問題を解決するのが、アニメーション処理中の
要素を選択できるセレクター:animatedです。
:not(animated)と書くと、
「アニメーション処理中ではない要素」を
絞り込めます。その:animatedを使ったのが、サンプルコードの
４０行目～４５行目です。

実行結果はこちらです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQueryStudy</title>
    <style>
	*{margin:0;padding:0;}
	
    #container{
        width:640px;
        height:400px;
        background-color:white;
        font-weight:100;
        margin:0 auto;}
    div{
        width:100px;
        height:100px;
        display:block;
        background-color:blue;}

    </style>        
    <script src="js/jquery-1.11.3.js"></script>  
    
</head>
<body>
    <button id="show">表示</button>
    <button id="hide">非表示</button>
    <div></div>
    
<script>
$(function(){
/*    
    $("button#show").click(function(){
        $("div").show("slow");
    });
    $("button#hide").click(function(){
        $("div").hide("slow");
    });
*/
    $("button#show").click(function(){
        $("div:not(:animated)").show("slow");
    });
    $("button#hide").click(function(){
        $("div:not(:animated)").hide("slow");
    });
});
</script>

</body>
</html>

<!doctype html>

<html>

<head>

<title>jQueryStudy</title>

<style>

*{margin:0;padding:0;}

#container{

width:640px;

height:400px;

background-color:white;

font-weight:100;

margin:0 auto;}

div{

width:100px;

height:100px;

display:block;

background-color:blue;}

</style>

</head>

<body>

$(function(){

$("button#show").click(function(){

$("div").show("slow");

});

$("button#hide").click(function(){

$("div").hide("slow");

});

$("button#show").click(function(){

$("div:not(:animated)").show("slow");

});

$("button#hide").click(function(){

$("div:not(:animated)").hide("slow");

});

</script>

</body>

</html>

-jQuery
-アニメーションが止まらない時の対処法

comment コメントをキャンセル

: jQuery

透明度を少しづつ変更する　fadeTo()

fadeTo()は、セレクターで指定した要素の透明度(CSSのopacityプロパティ)を、設定した値にまで少しづつ変更する命令です。括弧内には、スピード、透明度、コールバック関数を指定します。 ...

jQuery

水平方向のアコーディオンメニュー

今回紹介するのは横にスライドするアコーディオンメニューです。実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>HorrizontalAccordion</title>
   
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/jquery.zaccordion.js"></script>

    <style>
    *{margin:0;padding:0;}
    ol,ul{list-style-type:none;}
        
    div#contents{
        width:920px;
        height:400px;
        padding:20px;
        background-color:brown;
        position:absolute;
        margin:-220px 0 0 -480px;
        left:50%;
        top:50%;
        -webkit-box-shadow:0 0 50px rgba(0,0,0,0,5);
    }
    h1{
        width:110px;
        height:370px;
        position:absolute;
        top:20px;
        right:20px;
        padding:30px 0 0 50px;
        background-color:skyblue;}
    ul#contentsList{width:760px;}
        
        ul#contentsList li{
            width:460px;
            position:relative;
            overflow:visible;}
        ul#contentsList li:nth-of-type(1){
            background-color:yellow;}
        ul#contentsList li:nth-of-type(2){
            background-color:yellowgreen;}
        ul#contentsList li:nth-of-type(3){
            background-color:purple;}
        ul#contentsList li:nth-of-type(4){
            background-color:turquoise;}
        ul#contentsList li:nth-of-type(5){
            background-color:pink;}
        ul#contentsList li:nth-of-type(6){
            background-color:coral;}

            ul#contentsList li h2{
                position:absolute;
                top:0;
                right:0;
                height:400px;
                padding:50px 15px 0 0;
            /*    border-right:1px solid #ddd;*/
                background-color:aquamarine;}

            ul#contentsList li.frame-open h2{
                background-color:red;}
    </style>

</head>
<body>

<div id="contents">
    <h1></h1>
    <ul id="contentsList">
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
    </ul>
</div>

<script>
$(function(){
    
    //アコーディオンの設定
    var li = $("#contentsList li").toArray().reverse();
    $("contentsList").empty().append(li);
    
    $("#contentsList").zAccordion({
        timeout:1000,            // 自動スライド時の１スライド当たりの表示時間
        slideWidth:460,           // アコーディオンのコンテンツの全体の幅
        width:760,                // アコーディオンのコンテンツの全体の高さ
        height:400,               // スライドするコンテンツ１枚分の幅
        speed:440,                // スライドするコンテンツ１枚分の高さ
        startingSlide:5,          // 最初に表示するコンテンツ番号
        slideClass:"frame",                 // スライドさせるコンテンツのli要素に付すクラス名
        slideOpenClass:"frame-open",        // 開いているコンテンツのli要素に付すクラス名
        slideClosedClass:"frame-closed",     // 閉じているコンテンツのli要素に付すクラス名
        slidePreviousClass:"frame-previous", // 前回開いていたコンテンツのli要素に付すクラス名
        easing:"easeInOutCubic",            // スライド時のアニメーション
        invert:true                         // 重なり順を逆にして見出しを右に持ってくる
    });
});
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

<!doctype html>

<html>

<head>

<title>HorrizontalAccordion</title>

<style>

*{margin:0;padding:0;}

ol,ul{list-style-type:none;}

div#contents{

width:920px;

height:400px;

padding:20px;

background-color:brown;

position:absolute;

margin:-220px 0 0 -480px;

left:50%;

top:50%;

-webkit-box-shadow:0 0 50px rgba(0,0,0,0,5);

}

h1{

width:110px;

height:370px;

position:absolute;

top:20px;

right:20px;

padding:30px 0 0 50px;

background-color:skyblue;}

ul#contentsList{width:760px;}

ul#contentsList li{

width:460px;

position:relative;

overflow:visible;}

ul#contentsList li:nth-of-type(1){

background-color:yellow;}

ul#contentsList li:nth-of-type(2){

background-color:yellowgreen;}

ul#contentsList li:nth-of-type(3){

background-color:purple;}

ul#contentsList li:nth-of-type(4){

background-color:turquoise;}

ul#contentsList li:nth-of-type(5){

background-color:pink;}

ul#contentsList li:nth-of-type(6){

background-color:coral;}

ul#contentsList li h2{

position:absolute;

top:0;

right:0;

height:400px;

padding:50px 15px 0 0;

/* border-right:1px solid #ddd;*/

background-color:aquamarine;}

ul#contentsList li.frame-open h2{

background-color:red;}

</style>

</head>

<body>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

</ul>

</div>

$(function(){

//アコーディオンの設定

var li = $("#contentsList li").toArray().reverse();

$("contentsList").empty().append(li);

$("#contentsList").zAccordion({

timeout:1000, // 自動スライド時の１スライド当たりの表示時間

slideWidth:460, // アコーディオンのコンテンツの全体の幅

width:760, // アコーディオンのコンテンツの全体の高さ

height:400, // スライドするコンテンツ１枚分の幅

speed:440, // スライドするコンテンツ１枚分の高さ

startingSlide:5, // 最初に表示するコンテンツ番号

slideClass:"frame", // スライドさせるコンテンツのli要素に付すクラス名

slideOpenClass:"frame-open", // 開いているコンテンツのli要素に付すクラス名

slideClosedClass:"frame-closed", // 閉じているコンテンツのli要素に付すクラス名

slidePreviousClass:"frame-previous", // 前回開いていたコンテンツのli要素に付すクラス名

easing:"easeInOutCubic", // スライド時のアニメーション

invert:true // 重なり順を逆にして見出しを右に持ってくる

});

</script>

</body>

</html>

今回使っているjQueryプラグイン ●jQuery ...

: jQuery

独自のアニメーションを指定する animate()

animate()命令は、任意のCSSプロパティの値を徐々に変更して、独自のアニメーションを作成できる命令です。括弧内にはCSSプロパティ、アニメーションのスピード、動き(easing)、コール ...

: jQuery

画面を下にスクロールさせると、違うデザインのメニューがついてくる

タイトルの通りです。画面をスクロールさせると、違うデザインのメニューがついてくる機能を今回作成しました。サンプルコードの実行結果はこちら今回は「throttle-debounce」プラグインを使用 ...

: jQuery

マウスのホイールを使って画像の切替を行う

タイトルの通りです。マウスのホイールをいじると画像が切り替わるjQueryの機能を作成してみました。サンプルコードの実行結果はこちら今回使用したプラグイン・imagesloaded ・jquer ...

非表示の要素を表示する show()

要素の表示・非表示を交互に切り替える toggle()