memocarilog

高さをスルスルと変更して出現したり消えたりする、jQuery の slideUp()/slideDown() の動きを jQuery を使わずに JavaScript と CSS のみでやってみました。

jQuery の slideUp()/slideDown() の動き

再現したい jQuery の slideUp()/slideDown() の動作はこのような感じです。ボタンをクリックでスルスルとしたアニメーションで開いたり閉じたりします。

See the Pen jQuery で slideUp()/slideDown() by Saomocari (@Saomocari) on CodePen.

HTML コード

HTMLは共通で以下のようになっています。#box が開閉する部分です。

<section>
<h1>カワウソ</h1>

<p>カワウソ（獺、川獺）は、ネコ目（食肉目）イタチ科カワウソ亜科に属する哺乳動物の総称である。カワウソ亜科にはニホンカワウソやラッコなどが属している。</p>
<p id="btn">続きを読む…</p>
<div id="box">
  <p> 泳ぎが得意であり、水中での生活に適応している。また、ラッコ以外のカワウソは陸上でも自由に行動している。南極、オーストラリア、ニュージーランドを除く、世界全域の水辺や海上で生息している。水かきをもった四肢は短く、胴体は細長い。このような体型は水の抵抗が少なく、敏捷な泳ぎを可能にしている。</p>
</div>
</section>

CSS コード

#box には display: none を指定して見えない様にしておきます。

#box{
  display: none;
  overflow: hidden;
}

jQuery コード

jQuery で書くととても簡単で、slideToggle() というメソッドで交互に開くと閉じるをアニメーションでおこなってくれます。

$(function(){

    $('#btn').on('click', function(){
       $('#box').slideToggle('fast');
    });

});

JavaScript で slideUp()/slideDown() の動き

jQuery を使わずに JavaScript で再現してみたのが以下です。

See the Pen slideUp()/slideDown() の動きみたいなの by Saomocari (@Saomocari) on CodePen.

CSS コード

#box には display: none と height: 0; を指定して要素の高さを操作する準備をしておきます。

#box{
  display: none;
  overflow: hidden;
  height: 0;
}

JavaScript コード

JavaScript で書いた場合に、開閉するボックスを CSS で display: none; してしまうため、要素の高さの取得ができなくて困りました…。そこで、jQuery の slideUp()/slideDown() メソッドはどうやっているかを見てみました。

jQuery では、開閉するボックスのコピー要素を一旦作り、高さを取得してからそのコピー要素を削除するということを行っているようです。予想以上にめんどくさいことをしていたんだなと思いました。

jQueryのように、7〜16行目で開閉ボックスのコピーを作って高さを取得したら要素を削除するということを行っています。

<script>
window.onload = function(){  

var btn = document.getElementById('btn') ;
var box = document.getElementById('box') ;  
    
// #box のコピーを作る
var copyBox = box.cloneNode(true);
// #box の親ノードに挿入
box.parentNode.appendChild(copyBox);
// ひとまずみえなくする
copyBox.style.cssText = "display:block; height:auto; visibility:hidden; " ;
// コピーの高さを調べる
var copyBoxH = copyBox.offsetHeight;
// コピーした要素を削除する
box.parentNode.removeChild(copyBox);

// ボタンをクリックした時の処理
btn.onclick = function(){
    var boxH = box.offsetHeight;
    if(boxH < 1){
        box.style.display = "block";
        slideDown(boxH);
    } else {
        slideUp(boxH);
    }
};

// スライドダウンのアニメーション
var slideDown_timer;
function slideDown(boxH){
    if (boxH < copyBoxH) {
        var boxH = boxH + 5;
        box.style.height = boxH + "px";
        slideDown_timer = setTimeout(function(){slideDown(boxH)}, 5);
    } else {
        clearTimeout(slideDown_timer);
        box.style.height = copyBoxH;
    }
}

// スライドアップのアニメーション
var slideUp_timer;
function slideUp(boxH){
    if (boxH >= 1) {
        var boxH = boxH - 5;
        box.style.height = boxH + "px";
        slideUp_timer = setTimeout(function(){slideUp(boxH)}, 5);
    } else {
        clearTimeout(slideUp_timer);
        box.style.height = 0;
        box.style.display = "none";
    }       
}

}    
</script>

スライドアップ・ダウンのアニメーションは前回の記事（[JS] jQuery を使わずにスクロールでふわっと出現し、クリックするとページトップへスムーススクロールで戻るボタンを作る）と同じような形で、setTimeout で少しずつ要素の高さを変更していくのを繰り返し行い、スルスル動いているようにみせています。