Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[jQuery]フェードアニメーション

jQuery

リストとpositionレイアウトを利用し、次々に画像をフェード表示させる。

完成→

りんごを表示

ソースコード

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>りんごを表示</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
    $(window).load(function(){
        var delaySpeed = 400;
        var fadeSpeed = 1200;
        $('ul li').each(function(i){
            $(this).delay(i*(delaySpeed)).css({display:'block',opacity:'0'}).animate({opacity:'1'},fadeSpeed);
        });
    });
});
</script>
<link rel="stylesheet" href="style.css">
</head>

<body>
<ul>
<li id="apple1"><img src="img/apple.gif"></li>
<li id="apple2"><img src="img/apple.gif"></li>
<li id="apple3"><img src="img/apple.gif"></li>
<li id="apple4"><img src="img/apple.gif"></li>
<li id="apple5"><img src="img/apple.gif"></li>
</ul>
</body>
</html>

@charset "UTF-8";
/* reset */
html,body,h1,h2,ul,li{
  margin: 0;
  padding: 0;
  line-height:1.0;
}
ul{
  list-style: none;
}
img{
  border: none;
  vertical-align:bottom;
}

body{
  background-color: #BBE2F1;
}
ul{
  width: 301px;
  height: 346px;
  margin: 40px auto;
  background: url(img/tree.gif) no-repeat;
  position:relative;
}
ul li{
  position: absolute;
  display:none;
}
#apple1 { left:50px; top:172px; }
#apple2 { left:40px; top:76px; }
#apple3 { left:126px; top:33px; }
#apple4 { left:231px; top:81px; }
#apple5 { left:213px; top:180px; }

参考サイト

webdrawer.net

備考