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

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>
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">