jQueryオブジェクト .animate()

jQueryオブジェクトの animate メソッドで、カスタムアニメーションを行うことができる。

構文

jQueryObject.animate(object)

jQueryObject.animate(object, speed)

jQueryObject.animate(object, speed, handler)

object

オブジェクトを { property : value [, property : value ...]} の形式で指定する。

必須の引数であり、省略できない。

speed

アニメーションの速度を時間(ミリ秒単位)で指定する。

handler

アニメーション終了時に実行させる JavaScript を function(){ code } の形式で指定する。

サンプル

<style>
  #notification {
    display: none;
    height: 51px;
    left: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
    border-bottom: 1px solid;
    color: #806359;
    border-color: #f5d0c4;
    background-color: #fff4f0;
  }
  #notification > p {
    position: relative;
    font-weight: bold;
    margin: 0 auto;
    padding: 13px 10px 13px 30px;
    width: 900px;
  }
</style>

<button onclick="myAlert();">アニメーション開始</button>

<script>
  function myAlert() {
    var d = document.createElement('div');
    d.id = 'notification';
    var p = document.createElement('p');
    p.innerHTML = 'Hello, world!';
    d.appendChild(p);
    document.body.appendChild(d);
    var e = $(d);
    var h = e.height();
    e.css({
      top : '-' + h + 'px'
    }).show().animate({
      top : 0
    });

    setTimeout(function() {
      e.animate({
        top : '-' + h
      });
      setTimeout(function() {
        e.remove();
      }, 200);
    }, 2000);
  }
</script>

アニメーション開始