ユーザー生放送 【企画】到来！夏モテ☆コーデ(ィング)大特集HTML5+CSS3【jQuery編】No.4

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

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

    <<
    >>
    

        夏にモテたい
    
    

        
    
    
    animate
    

        
    

/*
の直前くらいに書いてないと要素が存在する前に実行されてしまうので動かない
なので、$(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);
    jQuery.extend(jQuery.easing,
    {
      easeInQuart: function (x, t, b, c, d) {
        return c*(t/=d)*t*t*t + b;
      },
    });
    setTimeout(function(){//実行を遅らせる
      $(".easing_block").animate(
        {height: "show",width: "show", opacity: "show"},
        //"slow", "easeInQuart"
        { duration: 600, easing: 'easeInCubic',}
      );
    },1500);
    /*
    $(".easing_block").animate({
        height: "show", width: 'toggle', opacity: "show"}, { duration: 600, easing: 'easeInCubic', 
    })
    */
});

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