.animate() example 2

basic jQuery

by Mindy McAdams

HTML

<p>click the giraffe several times</p>
<div id="field"></div>

CSS

div#field {
    background: #99ff66;
    width: 500px;
    height: 400px;
    position: relative;
}
img {
    position: relative;
}

JavaScript

// using jQuery .animate() to move an image around inside a DIV

var giraffe = "http://macloo.com/images/african_animals/giraffe.png";
var animal = '<img src=' + giraffe + ' alt="">';

$('#field').append(animal);

$('img').click (function() {
    if ( $(this).position().left < 100 ) {
        $(this).animate( { left: "200", top: "250" }, 'slow' );
    } else if ( $(this).position().left <= 200 ) {
        $(this).animate( { left: "350", top: "10" }, 'slow' );
    } else {
	    $(this).animate( { left: "20", top: "50" }, 'slow' );
    }
});