jQueryでできること

jQuery

animateを使っていろいろしてみよう楽しいよ

animateの書き方

$("セレクタ").イベント(function(){
  $("セレクタ").animate({
   cssプロパティ:"値",
   cssプロパティ:"値"
  },完了までの時間);
});

要素を左右に動かしてみよう

ボタンをクリックすると右に動くよ

animate!

ボタンをクリックすると左に動くよ

animate!

ボタンをクリックすると斜めに動くよ

animate!

使っているメソッド

.animate({}); => cssプロパティと組み合わせていろいろなアニメションができる

html部分

    <html>
    <head>
      <meta charset="UTF-8">
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <style>
        #animate2{
          margin-left: 300px;
        }
      </style>
    </head>

      <body>
        <p class="text">
          <i class="fa fa-caret-right"></i>ボタンをクリックすると右に動くよ<br>
        </p>

        <div class="sample">
          <div class="hover-btn" id="animate">animate!</div>
        </div>

        <p class="text">
          <i class="fa fa-caret-right"></i>ボタンをクリックすると左に動くよ<br>
        </p>

        <div class="sample">
          <div class="hover-btn" id="animate2">animate!</div>
        </div>

        <p class="text">
          <i class="fa fa-caret-right"></i>ボタンをクリックすると斜めに動くよ<br>
        </p>

        <div class="sample">
          <div class="hover-btn" id="animate3">animate!</div>
        </div>
    </body>
    </html>

jQuery部分

    $(function(){
      $("#animate").click(function(){
        $(this).animate({
          left : "300px"
        },1500);
      });

      $("#animate2").click(function(){
        $(this).animate({
          marginLeft : "30px"
        },1500);
      });

      $("#animate3").click(function(){
        $(this).animate({
          left : "300px",
          top : "50px"
        },1500);
      });
    });

メソッドチェーンを使って要素を連続で動かしてみよう

ボタンをクリックすると一周して戻ってくるよ

animate!

メソッドチェーンについて

メソッドを.(ドット)を使って繋げて使用することを「メソッドチェーン」と呼びます。
メソッドチェーンを使うとメソッドを繋げれるので、いろいろな処理をいっぺんにおこなうことができます。

html部分

    <html>
    <head>
      <meta charset="UTF-8">
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>

      <body>
        <div class="sample">
          <div class="hover-btn" id="animate4">animate!</div>
        </div>
    </body>
    </html>

jQuery部分

    $(function(){
      $("#animate4").click(function(){
        $(this).animate({top : "30px"},1500)
        .animate({left : "300px"},1500)
        .animate({top : "-30px"},1500)
        .animate({left : 0},1500)
        .animate({top : 0},1500);
      });
    });

いろいろしてみよう

ボタンをhoverすると要素の幅が広がる

animate!

ボタンをclickするごとに右に進んでいく

animate!

ボタンをhoverすると透明になったり戻ったりする

animate!

animate時のcssの値の書き方いろいろ

cssプロパティの値が0の時にはダブルクォーテーションは必要ありません。
◯◯づつ変化を加えたいという場合は、「"+=値"」という書き方をします。

使っているメソッド

.stop() => 処理を止めることができます。何回もホバーをすると狂った様に動くのでstop()をanimateの前に付けてあげましょう。

html部分

    <html>
    <head>
      <meta charset="UTF-8">
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>

      <body>
        <p class="text">
          <i class="fa fa-caret-right"></i>ボタンをhoverすると要素の幅が広がる<br>
        </p>

        <div class="sample">
          <div class="hover-btn" id="animate5">animate!</div>
        </div>

        <p class="text">
          <i class="fa fa-caret-right"></i>ボタンをclickするごとに右に進んでいく<br>
        </p>

        <div class="sample">
          <button id="animate6">右にすすめ</button>
          <div class="hover-btn" id="animateRight">animate!</div>
        </div>

        <p class="text">
          <i class="fa fa-caret-right"></i>ボタンをhoverすると透明になったり戻ったりする<br>
        </p>

        <div class="sample">
          <div class="hover-btn" id="animate7">animate!</div>
        </div>
    </body>
    </html>

jQuery部分

    $(function(){
      $("#animate5").hover(function(){
        $(this).animate({
          padding : "50px"
        },500);
      },function(){
        $(this).animate({
          padding : "5px 25px"
        },500);
      });

      $("#animate6").click(function(){
        $("#animateRight").animate({
          left : "+=50px"
        },500);
      });

      $("#animate7").hover(function(){
        $(this).animate({
          opacity : 0
        },500);
      },function(){
        $(this).animate({
          opacity : "1"
        },500);
      });
    });