The showDetails() function almost accomplishes the "unfolding" effect we set out to achieve, but because the top and left properties are animating at the same rate, it looks more like a "sliding in" effect. We can subtly alter the effect by changing the easing equation to easeInQuart
for the top property only, causing the element to follow a curved path rather than a straight one. Remember, however, that using any easing other than swing or linear requires a plugin, such as the effects core of jQuery UI (http://jqueryui.com/) or the standalone jQuery Easing plugin (http://gsgd.co.uk/sandbox/jquery/easing/), as follows:
$member.find('div').css({
display: 'block',
left: '-300px',
top: 0
}).each(function(index) {
$(this).animate({
left: 0,
top: 25 * index
}, {
duration: 'slow',
specialEasing: {
top: 'easeInQuart'
}
});
});Listing 11.8
The specialEasing option allows us to set a different acceleration curve for each property that is...