表示・非表示をスライドさせて切り替えるslidedown/slideUp()

2015年8月3日

slidedown/slideUp()は、セレクターで指定した要素の
表示・非表示をスライドアニメーションで切り替える命令です。

slideDown()は、非表示の要素の高さを０から本来の高さに
少しずつ近づけながら表示します。

slideUp()は、表示の要素の本来のから０からに
少しずつ近づけながら非表示します。

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

実行結果はこちらです。

<!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;}

    dl{
        width:200px;
        margin:20px;
    }
    dl dt{
        background-color:aqua;
        cursor:pointer;
    }
    dl dd{
        border:1px solid yellow;
    }
    </style>        
    <script src="js/jquery-1.11.3.js"></script>  
    
</head>
<body>

<dl>
    <dt>slideDown/SlideUp動作確認</dt>
    <dd>アニメーションで表示を切り替える</dd>
</dl>

<script>
$(function(){
    $("dt").click(function(){
       if( $("dd").css("display")=="block"){
           $("dd:not(:animated)").slideUp(300);
       }else{
           $("dd").slideDown(300);
       } 
    });


});
</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;}

dl{

width:200px;

margin:20px;

}

dl dt{

background-color:aqua;

cursor:pointer;

}

dl dd{

border:1px solid yellow;

}

</style>

</head>

<body>

<dl>

<dt>slideDown/SlideUp動作確認</dt>

<dd>アニメーションで表示を切り替える</dd>

</dl>

$(function(){

$("dt").click(function(){

if( $("dd").css("display")=="block"){

$("dd:not(:animated)").slideUp(300);

}else{

$("dd").slideDown(300);

}

});

</script>

</body>

</html>

cursorプロパティ

サンプルコードをみると。「cursor」というプロパティを
今回使用しています。このプロパティはマウスの形状を
設定します。

javaScriptのclickイベントを設定した要素にマウスの
カーソルをのせてもカーソルの形状が分かりません。
これだとクリックできるものだということが分かりません。

ですので、clickイベントを設定した要素には、
CSSの「cursor」プロパティで値を設定することで
ユーザーに「クリックができるもの」であることを
伝えることができます。