YUI: Animate Background Position

Click the link below to make the background position of the div animate.

Basically, this is an animation hack. What I did was create an element ( called holder ) and I am animating the top/left properties of it.

Then in the onTween event, I am copying the top/left setting of holder's position and setting the background position of the image on the div.

[Animate Background Position]

The Javascript

(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event,
        Anim = YAHOO.util.Anim,
        demo = null,
        animate = null,
        holder = null,
        anim = null,
        attrs = {
            top: 0,
            left: 0
        };

Event.onDOMReady(function() {
        demo = Dom.get('demo');
        animate = Dom.get('animate');
        Event.on(animate, 'click', function(ev) {
            var top = attrs.top - 80;
            animateBackground(top, 0);
            Event.stopEvent(ev);
        });
        holder = document.createElement('div');
        holder.id = 'holder';
        document.body.appendChild(holder);
        anim = new Anim(holder, {}, .5, YAHOO.util.Easing.bounceOut);
        anim.onTween.subscribe(function() {
            demo.style.backgroundPosition = holder.style.left + ' ' + holder.style.top;
        }, anim, true);
    });