【企画】到来！夏モテ☆コーデ(ィング)大特集HTML5+CSS3【jQuery編】vol1/2

2014年5月16日2020年10月10日

http://live.nicovideo.jp/watch/lv179664131

    <<
    >>
    

        夏にモテたい
    
    

        夏モテ
    
    

/*
の直前くらいに書いてないと要素が存在する前に実行されてしまうので動かない
なので、$(document).ready(function(){ここに動作を書く});で囲っておく。
*/
$(document).ready(function(){
    //アニメーション1
    setTimeout(function(){//実行を遅らせる
        $("#go").ready(function(){
          $("#block").animate({ 
            width: "150px",
            opacity: 0.4,
            marginLeft: "0.6in",
            fontSize: "1.5em", 
            borderWidth: "3px"
            //引数でキャメルケースで表現できるCSSのプロパティはもっとたくさんあるはず
          }, 1500 );
        });
    },1000);
    //アニメーション2
    $("#right").click(function(){
      $(".fade_block").animate({"left": "+=50px"}, "easeInOutQuart");
    });
    $("#left").click(function(){
      $(".fade_block").animate({"left": "-=50px"}, "fast");
    });
    //アニメーション3
    /*
    $("#animate").click(function(){
      $(".fade_block").animate(
        {height: "toggle", opacity: "toggle"},
        "slow"
      );
    });
    */
    setTimeout(function(){//実行を遅らせる
      $(".fade_block").animate(
        {
            height: "show",
            opacity: "show"
            },
        "slow"
      );
    },1500);
});

div#block { 
  background-color:#bca; 
  width:100px; 
  border:1px solid green;
  position: absolute;
  z-index: 1;
}
div.fade_block {
    left: 10px;
    width: 130px;
    height: 130px;
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    position: absolute;
    background-color: #abc;
    left: 50px;
    display: none;
    z-index: 0;
}