円グラフをjQueryでフェードさせながら表示 #JavaScript

円グラフをjQueryで順番にフェードさせる簡単な方法です。
「jQueryに詳しくないけど動きをつけたい」という方はぜひ参考にしてください。

デモ

https://aruto-room.github.io/demo/graph.html

コード

HTML


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="graph">
<img src="img/graph00.png">
<img src="img/graph01.png">
<img src="img/graph02.png">
<img src="img/graph03.png">
<img src="img/graph04.png">
</div>

CSS


.graph {
  position: relative;
}
.graph img {
  position: absolute;
  left: 0;
  top: 0;
}
.graph img:first-child {
  position: relative;
}

JS


jQuery(function(){
    // リストを非表示
    $('.graph img').css("opacity","0");

        // 繰り返し処理
    $('.graph img').each(function(i) {

        // 遅延させてフェードイン
        $(this).delay(300 * i).animate({opacity:1}, 500);
        })
})

参考

jQueryでli要素を順番にフェードさせながら表示する