.animate() jQuery Method

Learn about .animate() by EasyProgramming.net

by Nazmus Nasir

HTML

<!-- Easy jQuery - working with .animate() - #10 -->
<p>
Welcome to the 10th Easy jQuery Tutorial, part of <a href="http://www.easyprogramming.net">EasyProgramming.net</a>. In this tutorial, let's learn working with the .animate() method in jQuery.
</p>
<p>
We've used this in the first tutorial when we were demoing the syntax of jQuery. Animate just animates an element to appear a certain way, normally changes just CSS. The arguments needed in this method are <code>.animate(properties, duration, easing, complete);</code>.
</p>
<p>
The Duration, Easing, and Complete arguments are optional. We'll briefly touch on them. 
</p>

<h2>
Let's practice: 
</h2>

<p>
This text is in a <code>p</code> tag. Let's change the color of all text in p tags!
</p>

<div id="box">I'm a box</div>
<button id="scrollDown">
Scroll down
</button>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="scrollToMe">
SCROLL TO ME YO
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

JavaScript

$('#box').css({
	'background-color': 'lightblue',
  'width': '100px',
  'height': '100px',
  'color': 'darkblue',
  'text-align': 'center',
  'margin': 'auto'
});

$('#box').on('click', function(){
	$(this).animate({
		width: '+=100',
		height: '+=100'
	}, 5000);
});

$('#scrollDown').on('click', function(){
console.log($('#scrollToMe').offset().top);
	$('html').animate({
		'scrollTop': $('#scrollToMe').offset().top
	}, 1000, completedScroll);
});


function completedScroll(){
	console.log("completed scroll!!");
}