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 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/).
$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 being animated. Any properties that aren't included in the option will use the easing
option's equation...