<a href="#">BAŞLAT</a>
<div></div>
a{display: inline-block; background: #00FF99; padding:20px; border-bottom:4px solid #00CC00; color:#00CC99; text-decoration:none; margin-bottom:20px;}
div{width:150px; height:150px; background:red;}
$("a").click(function(){
  var div = $("div");  
  div.animate({height: 500}, "slow");
  div.animate({width: 500}, "slow");
  div.queue(function () {
    div.css("background-color", "blue");  
    div.dequeue();
  });
  div.animate({height: 150}, "slow");
  div.animate({width: 150}, "slow");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js