jQueryのslideUp（）、slideDown（）、およびslideToggle（）の例

投稿日: 2019-11-05 2019-11-05
タグ: jquery, jquery effects

jQueryには、スライド効果を簡単に作成するための3つの便利なメソッドが付属しています。

slideUp（） – スライドアップエフェクトで一致する要素を非表示にします.
slideDown（） – 一致する要素をスライドダウンエフェクトで表示します.
slideToggle（） – 一致した要素が表示されている場合は、

スライドアップ効果。隠れている場合は、スライド・ダウン・エフェクトで表示されます。

上記の3つの方法のうち、パラメータとしてのサポート期間は、遅い、速い、または正確なミリ秒です。このパラメーターを省略すると、デフォルトの400ミリ秒が適用されます。

自分で試してみてください

<html>
<head>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">
    .slideDownbox, .slideUpbox, .slideTogglebox{
        float:left;
        padding:8px;
        margin:16px;
        border:1px solid red;
        width:200px;
        height:50px;
        background-color:#000000;
        color:white;
    }
    .clear{
        clear:both;
    }
</style>

</head>

<body>

<h1>jQuery slideUp(), slideDown() and slideToggle() example</h1>


<div class="clear">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-2836379775501347"
     data-ad-slot="6894224149"></ins>
<script>
     (adsbygoogle = window.adsbygoogle ||[]).push({});
</script><h2>slideDown() example</h2>

    <div class="slideDownbox">
        Click me - slideDown()
    </div>

    <div class="slideDownbox">
        Click me - slideDown()
    </div>
</div>

<div class="clear">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-2836379775501347"
     data-ad-slot="8821506761"
     data-ad-format="auto"
     data-ad-region="mkyongregion"></ins>
<script>
(adsbygoogle = window.adsbygoogle ||[]).push({});
</script><h2>slideUp() example</h2>

    <div class="slideUpbox">
        Click me - slideUp()
    </div>

    <div class="slideUpbox">
        Click me - slideUp()
    </div>
</div>

<div class="clear">
    <h2>slideToggle() example</h2> <button id=slideToggle>slideToggle()</button>
    <br/>
    <div class="slideTogglebox">
        slideToggle()
    </div>

    <div class="slideTogglebox">
        slideToggle()
    </div>

</div>

<br/><br/>

<div class="clear">
    <button id=reset>Reset</button>
</div>

<script type="text/javascript">

$(".slideDownbox").click(function () {
   $(this).hide().slideDown('slow');
});

$(".slideUpbox").click(function () {
   $(this).slideUp(2000);
});

$("#slideToggle").click(function () {
   $('.slideTogglebox').slideToggle();
});

$("#reset").click(function(){
    location.reload();
});
</script>

</body>
</html>

リンク://wp-content/uploads/jQuery/jQuery-slideUp-slideDown-slideToggle-example.html[デモを試してください]

jquery

jqueryエフェクト

getdocs

13036