jQuery効果——slideDown()メソッド、slideToggle()メソッド、slideUp()メソッド

16146 ワード

slideDown()メソッド
定義と使用法
slideDown()メソッドは、スライド効果を使用することで、非表示の選択された要素を表示します.
構文
$(selector).slideDown(speed,callback)
パラメータ
説明
speed
オプション.エレメントの非表示から表示への速度(または逆)を指定します.デフォルトは「normal」です.可能な値:ミリ秒(たとえば1500)「slow」「normal」「fast」速度を設定すると、要素が非表示から表示になるまで徐々に高さが変わります.
callback
オプション.slideDown関数の実行が完了したら、実行する関数.
ヒントとコメント
ヒント:要素が完全に表示されている場合、callback関数が規定されていない限り、この効果は変化しません.注記:この効果は、jQueryで非表示になっている要素、またはCSSでdisplay:noneを宣言する要素に適用されます(ただし、visibility:hiddenの要素には適用されません).
例:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>           <p>   title>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js">script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".btn1").click(function () {
                $("p").slideUp();
            });
            $(".btn2").click(function(){
                $("p").slideDown();
            });
        });
    script>
head>
<body>
<p>This is a paragraph.p>
<button class="btn1">Hidebutton>
<button class="btn2">Showbutton>
body>
html>

slideToggle()メソッド
定義と使用法
slideToggle()メソッドでは、スライド効果(高さ変化)を使用して要素の表示状態を切り替えます.選択された要素が表示されている場合は非表示、選択されている要素が非表示の場合は表示されます.
構文
$(selector).slideToggle(speed,callback)
パラメータ
説明
speed
オプション.エレメントの非表示から表示への速度(または逆)を指定します.デフォルトは「normal」です.可能な値:ミリ秒(たとえば1500)[slow](slow)[normal](normal)[fast](fast)速度を設定すると、要素は切り替え中に徐々に高さが変化します(スライド効果が得られます).
callback
オプション.toggle関数の実行が完了したら、実行する関数.
ヒントとコメント
ヒント:要素が非表示の場合、callback関数が規定されていない限り、この効果は変化しません.
例:


<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>      ，             <p>   ：title>
        <script type="text/javascript" src="js/jquery-1.7.2.min.js">script>
        <script type="text/javascript">
            $(document).ready(function(){
                $(".btn1").click(function(){
                    $("p").slideToggle();
                });
            });
        script>
    head>
    <body>
        <p>This is a paragraph.p>
        <button class="btn1">Togglebutton>
    body>
html>

slideUp()メソッド
定義と使用法
スライド効果を使用して、要素が表示されている場合は、選択した要素を非表示にします.
構文
$(selector).slideUp(speed,callback)
パラメータ
説明
speed
オプション.エレメントが非表示に見える速度(または逆)を指定します.デフォルトは「normal」です.可能な値:ミリ秒(たとえば1500)[slow](slow)[normal](normal)[fast](fast)速度を設定すると、要素は非表示に見える過程から徐々に高さを変更します(これによりスライド効果が得られます).
callback
オプション.toggle関数の実行が完了したら、実行する関数.
ヒントとコメント
ヒント:要素が非表示の場合、callback関数が規定されていない限り、この効果は変化しません.
例:


<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>        <p>   title>
        <script type="text/javascript" src="js/jquery-1.7.2.min.js">script>
        <script type="text/javascript">
            $(document).ready(function(){
                $(".btn1").click(function(){
                    $("p").slideUp(1000);
                });
            });
        script>
    head>
    <body>
        <p>This is a paragraph.p>
        <button class="btn1">Hidebutton>
    body>
html>

VirtualBox仮想マシンの移行

JQueryはcheckbox全選、不選、逆選を実現