More than 3 years have passed since last update.

【備忘録】jQueryでアニメーションをつける

Posted at 2020-03-02

#jQueryの備忘録

sample.html

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>sample</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <a class="btn" href="#" role="button">ボタン</a>
    <div></div>
    <div></div>
    <div></div>
    <script src="./main.js"></script>
    <script type="text/javascript">
    $(function(){
      $('.btn').click(function(){
        $("div").eq(0).fadeIn('slow');
        $("div").eq(1).show('slow');
        $("div").eq(2).slideDown('slow');
      })
    });
    </script>
  </body>
</html>

style.css

@charset "UTF-8";
div{
    width:200px;
    height:200px;
    background:red;
    display:none;
}

【メモ】
・fade,show,slideDownの動きを比較
・eqメソッドを使用することで特定の位置にある要素を指定することができる。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up