Multiproperty easing
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' } }); });
Get Learning jQuery - Fourth Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.