steal('jquery/dom/fixture', function(){
$('#result').text('processing');
//Set ajax delay as random number
$.fixture.delay = 1000*parseInt(10*Math.random(), 10);
//Set fake.json as paeudo ajax response url
$.fixture('fake.json', function(){
return { result: 'done' };
});
//Wait until ajax and animation all done
$.when($('#timeline').animate({ left: 100 }), $.ajax({
url: 'fake.json', dataType: 'json'
})).done(function(){
$('#result').text('done!');
});
});
External resources loaded into this fiddle:
<div id="timeline"></div>
<div id="result"></div>
#timeline {
width: 100px;
height: 30px;
background: #0186d1;
border: grey;
position: absolute;
}