animate() example

a simple jQuery example ...

by Mindy McAdams

HTML

<p>Below are two images -- click on them!</p>

<img id="theLion" src="http://macloo.com/images/african_animals/lion.png" alt="An animal icon">
    
<img id="theGiraffe" src="http://macloo.com/images/african_animals/giraffe.png" alt="An animal icon">

CSS

body {
    font-family: Calibri, sans-serif;
}
/* animate() requires block and position below */ 
img {
    display: block;
    position: relative;
}

JavaScript

// animate() example

$(document).ready(function(){
    
    
	$('img').click (function() {
        if ( $(this).position().left > 100 ) {
            $(this).animate( { left: "-=100px" }, 'fast' );
        } else {
			$(this).animate( { left: "+=100px" }, 'fast' );
        }
	});
    
    
});