どうも。ご無沙汰しております。
WEBおじさんです。
今日は、animate関数について、ちょこっと使えるテクニックを書いていこうかと思っとります。
以前、slideToggleについて少し書いたことがあります。
https://pgm.peace-machine.net/2020/07/08/easy-script/
こちらの記事では要素を上下に閉じたり開いたりする動きを作ってますね。
これはこれでもちろんいろんなところで使えたりするのですが、toggle系は上下しか動かないのでちょっと動きの幅が狭いですよね。
気持ち的に、上下で動かせるなら左右でも動かせるよね？とか考えちゃいますよね。
しかも、実際に動かしてるサイトあるしね。
なので、今回は左右の動きをプラグインとかの出来合いのものではなく、自分で作れるように仕組みを理解しちゃいましょーっていう回ですｗ
というわけで、いつも通りまずはデモはこちらから。
「OPEN」のところをクリックすると文字が「CLOSE」に変更され、左側に隠れている部分が右側にスーッと出てきます。
スマホとかのナビゲーションとか、PCサイトでもバナー表示とかに使われたりしますよね。
それ以外に、JSでタイマーをセットして「●●秒後に左から表示させる」みたいな処理ができますね。
（タイマーセットはまた別の機会にｗ）
では、デモのソースで処理を説明します。
【HTML】
<div id=”boxbox”>
<p id=”disbox”></p>
<p id=”btnbox”>OPEN</p>
</div>
【CSS】
#boxbox {
width:260px;
text-align:center;
font-weight:bold;
margin-bottom:30px;
padding:20px;
border:2px solid #666;
box-sizing:border-box;
position:relative;
display:flex;
left:-200px;
}
#disbox {
width:200px;
background-color:#00f;
color:#fff;
}
#btnbox,
#btnboxop {
width:60px;
background-color:#f00;
color:#fff;
cursor:pointer;
}
【jQuery】
$(function(){
$(document).on(‘click’,’#btnbox’,function(){
//OPENさせる処理
$(‘#boxbox’).animate({
‘left’:’0′
},300);
$(‘#btnbox’).text(‘CLOSE’).attr(‘id’,’btnboxop’);
});
$(document).on(‘click’,’#btnboxop’,function(){
//CLOSEさせる処理
$(‘#boxbox’).animate({
‘left’:’-200px’
},300);
$(‘#btnboxop’).text(‘OPEN’).attr(‘id’,’btnbox’);
});
});
では解説ですが、今回のHTMLソースで重要なのは、左側に隠しとくCSSをセットしておくということですね。
今回は、#boxboxにleftでネガティブなpxをセットしてます。
これは別にこの通りにやらなくても、例えばwidthを0にしたりbodyにoverflow:hiddenをセットしてmargin-leftのネガティブpxをセットしたり、などなどいろいろ隠しておく方法はあると思うので、お好きなCSSを使ってください。
今回のCSSで重要なところはその部分だけで、それ以外はあまり重要ではありません。
そして、jQueryですが、ポイントがいくつかあります。
まず、
$(document).on(‘click’,’#btnbox’,function(){
の部分。
ここの部分を見て「ん？なんかややこしい書き方してない？」と思った方いらっしゃると思いますが、この書き方をしたのには意味があります。
これ、前に書いてなかったかなー。
通常であれば、
$(‘#btnbox’).on(‘click’,function(){
もしくは
$(‘#btnbox’).click(function(){
と書く方が多くいらっしゃると思いますが、この場合、隠れている部分を右にずらして表示させることはできてもCLOSEボタンで隠れていた部分を再度しまうことができないのです。
なぜかというと、表示させた時と表示させていないときのid名が変更されているため、documentで指定してclick処理を行わないとjQueryが動いてくれません。
このページを読み込んだ時に元々セットされていなかったid名がjQueryによって新たに変更された場合、それに対して何かしらの処理を実行したい場合はdocumentで指定し、そのあとにイベントとその対象のクラスやidを指定する必要があります。
ただ、今回はid名を変更していたのでこういった書き方をしましたが、id名やクラス名を変更せずに処理をする場合はdocumentでの書き方ではなく、通常の書き方で問題ありません。
次にanimate関数の書き方ですが、サンプルの通りです。
animate関数の引数にはCSSを設定し、第二引数にはマイクロ秒で動きのスピードを設定します。
その時のCSSの書き方なんですが、通常のCSSの書き方では認識されない場合があります。
今回のような「left」の場合は問題ありませんが、これが例えば「margin-left」でセットしたい場合は「marginLeft」という書き方になります。
つまり、ハイフンが入るスタイル名の場合は書き方が変わります。また、使えないものもあります。
書き方については、Google（神）で検索して調べてみてくださいね。
とりあえず注意点としてはそんなとこですね。
id名やクラス名を変更する場合は変更前の名前と変更後の値での処理を書くのを忘れずに。
ここを見た方々ならもう完璧ですね。
あとは使いたい形でHTMLとかCSSを変更して見栄えよく使ってください。
ということで、今回はanimate関数で横にスライドさせる動きを作りましたが、animateは横だけではなく、いろんな動きをスムーズに動かすことができますので、いろいろと調べて動かしてみてくださいね。
以上、WEBおじさんでした！
また！
