読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

clickイベントとtransform

以前やったtransform(変形)ではhover時にtransformを使用し、移動、回転、拡大などを行いました。
ただ、hoverでのtransformはマウスを離すと元に戻ってしまうという問題があります。

yachin29.hatenablog.com




今回はhoverでは無く、jQueryのclickイベントを使ってtransformを適用させるようにしてみましょう。

<script>
$(function() {
  $('.box').on('click', function() { //div.boxをクリックしたら
   
  });
});
</script>
toggleClass(class名)

指定したCSSクラスが要素に無ければ追加し、あれば削除する。

<script>
$(function() {
  $('.box').on('click', function() { //div.boxをクリックしたら
    $(this).toggleClass("red"); //div.boxにクラス名redが追加される
  });
});
</script>
slideToggle(スピード)

各要素の高さを操作して、slideDown/slideUpの動作を交互に行います。
アニメーション効果は指定したスピードで実行されます。
速度は、”slow”、”normal”、”fast”、もしくは完了までの時間をミリ秒単位で指定します。例えば”1500”であれば、1.5秒かけてアニメーションが行われます。
省略された場合は、”normal”が用いられます。

<script>
$(function() {
  $('.box').on('click', function() { //div.boxをクリックしたら
     $(".menu").slideToggle(200);
  });
});
</script>