Modify for allow different duration, easing and delay for each attribute...

[rerefreelancer]

Example:

    $("#hover").transition({
        opacity: 0.5,
        scale: 0.3,
        duration: [250, 500],
        easing: 'in',
        delay: [500, 200]
    });

opacity transition now has duration 250, easing in and delay 500
scale transition now has duration 500, easing in and delay 200

[pingram3541]

Good idea, this is what I interpreted the queue: false option in chaining would be used for but I found that by adding that value just causes the duration to be ignored. For example I assume that you apply the queue: false attribute to the transition you don't want queued like so:

$('.item').transition({ rotate:'30deg', duration: '1000' }).transition({ opacity: '0.5', duration: '1000', queue: false });

but in this example, the rotation is immediate rather than over a second and the fade begins immediately as desired.

$('.item').transition({ rotate:'30deg', duration: '1000', queue: false }).transition({ opacity: '0.5', duration: '1000' });

Oddly, this has the same result

[pingram3541]

Oh and now reviewing my examples above to be more clear, if I really wanted both the rotation and opacity animated at the same time for 1 second I'd simply:

$('.item').transition({ rotate: '30deg', opacity: '0.5', duration: '1000' });

which works, but I should be able to fire both at the same time each with their own delays and durations like so:

$('.item').transition({ rotate: '30deg', duration: '1000' }).transition({ opacity: '0.5', delay: '500', duration: '5000', queue: false });

I also tried:

$('.item').transition({ rotate: '30deg', duration: '1000' }).transition({ opacity: '0.5', delay: '500', duration: '5000' }, { queue: false });

$('.item').transition({ rotate: '30deg', duration: '1000' }).transition({ opacity: '0.5' }, { delay: '500', duration: '5000', queue: false }); //like .animate is documented

None of these worked. Both animations should get fired at the same time, the rotation should begin immediately but the opacity (even though fired at the same time as the rotation) should animate after 500ms and both complete after the 1 second mark. The queue method is not working or we need further instruction on how to use it...but looking at the code...I'm pretty sure I'm doing it right.

[d9su]

As of version 0.9.9, this issue is still present. Apparently @rerefreelancer 's pull request isn't approved yet.

[pingram3541]

Yep for now I've had to add element wrappers and animate the parents...not sure how much this pollutes the dom or memory space as I haven't ran any benchmarks but it works.

[benmurrell]

I like the idea behind the patch, but it doesn't match any of the ways of doing similar things with jQuery.animate(). I have hacked in the specialEasing option referenced here: https://api.jquery.com/animate/ - when I get a chance to clean up the implementation I'll submit a pull request with the patch if there's any interest.