フロントのエンド

Web開発をがんばりたいブログ

jQuery

jQuery の アニメーションをホバーでループで

by:
16/08/31

CSSだとhoverの処理だけなのに、jQueryだとカーソルが乗ったとき、外れたとき別々に処理を書かないとアレなんですね。

さて、jQueryの練習がてら、SVGのパスを順番にアニメーションさせたい!と思って、コツコツやり方を調べました。

やりたいこと

  • マウスがホバーしている間任意のアニメーションがループして、ホバーから外れたら止まるやつ

要するにこのサイトのヘッダー部分に使っているやつです。SVGで描画されているそれぞれのパスに対してクラスを付けて、時間差でなんやかんやという話です。

だいたいは思ったように出来たかなぁ。

おそらく、ポイントは

  var hov = $(".box"); //ホバーする子
  var target = $(".tikatika"); //点滅する子

  function repeat() {
    target.each(function(i) {//eachでそれぞれのクラスに対して
      $(this).delay(200 * i).animate({//delayさせて時間差実行
        opacity: 0
      }, 200, function() {//最初のanimateが終わったら
        $(this).delay(200).animate({//次の処理
          opacity: 1
        }, 200);
      });
    });
  }

eachthisdelayでアニメーションさせたい対象をちょっとづつズラしつつ処理してる部分。

jQueryでリストを一つずつ遅延して表示する | webOpixel

  function repeatStart() {
    repeat();//即時実行
    roop = setInterval(repeat, 1200);//繰り返し実行
  }

  function repeatStop() {
    clearInterval(roop);//繰り返しをクリア・リセット
  }

後は、ホバーの時に走らせる関数、止める関数をそれぞれ作って

setIntervalとclearIntervalの使い方 – jQuery(javascript)の使い方

  //ホバーの処理
  hov.hover(repeatStart, repeatStop);

ホバーの時、ホバーが外れたとき、それぞれに関数を放り込む。

スポンサーリンク

詰まったところ

アニメーションをループさせるところまではわかったけど、ホバーアウトしたときにループを止める方法が全然わからなかった。

clearInterval(repeat);

↑これでなんとなく止まりそうな気がしてたけども、

roop = setInterval(repeat, 1200);

一回変数に格納してから、

clearInterval(roop);

そいつをクリアする、的な。この処理で止めないと止まらないっぽい。

CSS3のアニメーションとかトランジションとかのほうが感覚艇に分かりやすい気がするのは、慣れてるからだな、きっと。

コメントを残す