jQuery .animate()

jQuery .animate() performs a custom animation of CSS properties;

<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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

By default, animations are queued, but you can disable this by setting the queue property to false. Unqueued animations start immediately. Subsequent queued animations are not deferred for unqueued animations. The width animation begins at the same time the fadeIn() effect begins.

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

1 comment on “jQuery .animate()

  1. Pingback: Your Best Questions About Jquery Animate | Top Apprentice Blog

Leave a Reply

Your email address will not be published. Required fields are marked *