jQuery .animate() performs a custom animation of CSS properties;
$('.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
});
});
html:
<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.
$(".target").fadeIn(500)
.animate({"width":"+=100"},
{queue:false, duration:1000})
.fadeOut(500);
1 thought on “jQuery .animate()”