Use jQuery to select, then use YUI to animate? Good idea?

Question

jQuery's animation engine isn't working well for me. It doesn't have easing and color animation built-in, and the plugins I am using for them don't work properly together consistently.

I've had good experience with YUI's animation engine in the past. Is it possible to use jQuery to select items, and then use YUI to animate them? Here's my current jQuery-animated code to animate a div when you click it:

$("div.article").mousedown(function() {
    $(this).children(".box").animate({height:'+=100px', paddingTop: '24px'},300);   
    $(this).children(".box").children(".subBoxA").show().animate({opacity: "1"}, 500);  
});

How would I go about converting the animations in this function to YUI3?

(Is this even a good idea? Should I just convert everything to YUI3, selectors and all? Also, if this comes across as a dumb question, forgive me, i'm a noob)

Answer 1

If you are animating a single element, you can do something like this:

YUI.use("anim", function (Y) {
    $("div.article").mousedown(function () {
        var el = $(this).children(".box")[0],
            anim;
        anim = new Y.Anim({
            node: el,
            /* animation configuration */
        });
        anim.run();
    });
});

AFAIK, YUI does not support animating multiple elements out of the box, though you could implement it using the tween events.

I suspect you are better off using jQuery UI, however. It provides color animation and advanced easing.