jQuery .animate()

<script>
$('.clickme').click(function() {
    $('.target').animate({
        width: '+=50',
        height: '+=50'
    }, 3000, 'linear', function() {
        console.log('animation complete');
    });
});
 
$('.clickme-toggle').click(function() {
    $('.target').animate({
        width: ['toggle', 'swing'],
        height: ['toggle', 'swing'],
        opacity: 'toggle'
    }, 3000, 'linear', function() {
        console.log('animation complete');
    });
});
 
$('.clickme-special').click(function() {
	$('.target').animate({
		width: 'toggle',
		height: 'toggle'
	}, {
		duration: 3000,
		//easing: 'swing',
		specialEasing: {
			width: 'linear',
			height: 'easeOutBounce'
		},
		complete: function() {
			console.log('animation complete');
		},
		step: function() {
			console.log('width: ' + $(this).css('width') );
		},
		queue: false
	});
});
 
</script>

<div class="clickme">click me animate</div>
<div class="clickme-toggle">click me toggle animate</div>
<div class="clickme-special">click me special animate</div>
<div class="target">target</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

<script>
$(".target").fadeIn(500)
	.animate({"width":"+=100"},
	{queue:false, duration:1000})
	.fadeOut(500);
</script>