deferreds 1.6 fun by dan h.
by Eric Hynds
HTML
<script src="http://dl.dropbox.com/u/13872105/dfd-jquery-1.6.js"></script>
<button>GO</button> Click it a few times :p
<ul>
<li>Object 1</li>
<li>Object 2</li>
<li>Object 3</li>
<li>Object 4</li>
<li>Object 5</li>
<li>Object 6</li>
<li>Object 7</li>
</ul>
CSS
ul { list-style: none; }
li { display:block;
border:1px solid #000;
background: #FFF;
width:50px;
height:50px;
position:absolute;
}
li.jaubourg {
border: 2px solid #F00;
background: #000;
color: #999;
}
li.eric {
border: 3px solid #00F;
}
JavaScript
function go() {
var $lis = $('li'),
$window = $(window);
$lis.each( function() {
var $li = $(this);
$li.animate({
top: Math.random() * ( $window.height() - 50 ),
left: Math.random() * ( $window.width() - 50 )
},
{
duration: Math.random() * 1500,
complete: function() {
$(this).toggleClass( 'eric' );
}
});
});
var $req = $.ajax({
url: '/echo/html/',
type: 'POST',
data: { html: "OH YEAH" }
});
$.when( $lis , $req ).done( function( l, r) {
$lis.toggleClass( 'jaubourg' ).html( r[0] );
});
}
$(document).ready( function() {
$('button').click( go );
});