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

Part of the benefit of these javascript libraries is that you get a ton of functionality in a smaller amount of code. By including both JQuery and YUI, you are quickly increasing the size of your pages.

If the only thing you are using jquery for is to select elements in the DOM, then definitely convert to YUI as it has many of the same selection methods. If you are using several pieces of both jquery and YUI, then mixing them may be something you have to live with for now.

Answer 2

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.