smoothly make a div bigger in jQuery

Question

How can i make a div to blink two times and then it grows bigger on page load.

For example, the div will start with width: 50px; height:50px; and after blinking two times, it will smoothly grow to width: 250px; height:400px;

I've read about jQuery easing function, but i'm not familiar with jQuery i couldn't utilize the examples i found.

Help is greatly appreciated

Answer 1

This should get the job done in just a few lines.

http://jsfiddle.net/2vVpt/

$("#blinkandresize")
.fadeOut(300)
.fadeIn(300)
.fadeOut(300)
.fadeIn(300)
.animate({
    height: 400,
    width: 250
});​