 <p>You can do it by using the animate function like this:</p> <pre><code>$('#square').on('mousedown', function(e) { $(this).animate({height:-200},2500); }); </code></pre> <p><a href="http://jsfiddle.net/6Lg9vL8m/3/" rel="nofollow">Demo</a></p> <p>Updated code to create a "curtain raising" like animation:-</p> <pre><code>$('#square').on('mousedown', function(e) { $(this).animate({height:-200},2500); $(this).children().animate({"margin-top":"-400px"},2500, function() { $(this).css({"margin-top":0}) }); }); </code></pre> <p>CSS:</p> <pre><code>`#square{ overflow:hidden; }` </code></pre> <p><a href="http://jsfiddle.net/6Lg9vL8m/10/" rel="nofollow">Demo 2</a></p>