jQuery Animate Example

jQuery Animate Example

by Adi Jaya

HTML

<button id="clickme">clickme</button>

<div id="demo">
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3">
        <h3>Welcome</h3>
        <p>Lorem Ipsum...</p>
    </div>
</div>

CSS

/* CSS Code */
body {
    background: #d1d8ff;
    padding: 15px;
    font-family: sans-serif;
    font-size: 1rem;
    line-height: 1.4;
}

#clickme {
    padding: 10px 18px;
    background: #2196f3;
    color: white;
    border: 1px solid #1989e2;
    outline: none;
    cursor: pointer;
}

#demo {
  position: relative;
  text-align: center;
}

.a1 {
    background-color: #2196f3;
    width: 1px;
}

.a2 {
    background-color: #2196f3;
    height: 1px;
    position: absolute;
}

.a3 {
    display: none;
    background-color: #2196F3;
    position: absolute;
    padding: 15px;
    left: 0;
    overflow: hidden;
    color: #fff;
    border-radius: 4px;
}

JavaScript

$("#clickme").click(function() {
  /** @type {!Array} */
  var t = [$(this).outerWidth() / 2];
  $("#demo").css("margin-left", t + "px");
  $(".a1").animate({
    height : "250px"
  }, 1000, function() {
    /** @type {number} */
    var orig_top = [$(this).height() / 2] - $(".a2").height();
    $(".a2").css({
      top : orig_top + "px"
    }).animate({
      width : "100%"
    }, 2000, function() {
      var t = $(".a1").height();
      var a = $(".a3").height();
      /** @type {number} */
      var orig_top = ($(".a2").outerWidth(), [t / 2] - [a / 2]);
      $(this).animate({
        width : "20px"
      }, 3000, function() {
        $(".a3").fadeIn().css({
          top : orig_top + "px",
          left : "20px"
        });
        $(".a3").animate({
          right : "0"
        }, 1000, function() {
          $(".a1,.a2,.a3,#clickme").css({
            "background-color" : "#E91E63"
          });
          $("#clickme").css({
            "border-color" : "#E91E63"
          });
          $(".a2").animate({
            top : "40px"
          }, 2000);
          $(".a3").animate({
            top : "10px"
          }, 2000);
        });
      });
    });
  });
});