Jquery Animation

NA

by Santosh Thakur

HTML

<div id="btn"> This should be clicked </div>
<div id="para"> This is paragraph </div>

CSS

#btn {
  background: rgba(120, 200, 200, 0.2);
  padding: 10px
}

#para {
  background: rgba(220, 220, 220, 0.4);
  padding: 10px
}

JavaScript

(function() {
  $("#btn").on({
    mouseover: function() {
      $("#para").animate({
        'height': 100,
        'font-size': +20
      }, 2000, 'linear', abc())
    },

    mouseout: function() {
      $("#para").animate({
        'height': 20,
        'font-size': 14
      }, 2000)
    }

  });

  function abc() {
    alert("This is callback Function = Zoom In");
  }
})();