onmousedown and onmouseup with YUI Animation Utility

Question

My goal is to create an animation with the YUI Animation Utility that does the following:

1. The user clicks a button. An element begins moving from point A to point B
2. The user releases or moves the the cursor off the button. The element stops and stays in its current position.
3. The user clicks the button again. The element animates from its current position toward point B.

I can't see a way to do this with YUI. All the examples show a button that, when clicked, causes a set animation sequence to occur (no starting and stopping).

How can I do this with YUI?

Ylebre's answer worked! Here is the full, working code:

<style>
#menu_holder {
    height:100px;
    width:150px;
    overflow:auto;
}
</style>
<div id="menu_holder">
<ul id="menu">
<li><a href="#">Example Link</a></li>
<li><a href="#">Example Link</a></li>
<li><a href="#">Example Link</a></li>
</ul>
</div>
<br><br>
<button id="scroll-up">Scoll Up</button><br>
<button id="scroll-down">Scoll Down</button>

<script>
(function() {
    // find menu height
    var region = YAHOO.util.Dom.getRegion('menu');
    var elmHeight = region.bottom - region.top;
    // anim up
    var anim_up_attributes = {
        scroll: { to: [0, elmHeight*-1] }
    };
    var anim_up = new YAHOO.util.Scroll('menu_holder', anim_up_attributes);
    YAHOO.util.Event.on('scroll-up', 'mousedown', function() {
        anim_up.animate();
    });
    YAHOO.util.Event.on('scroll-up', 'mouseup', function() {
        anim_up.stop();
    });
    YAHOO.util.Event.on('scroll-up', 'mouseout', function() {
        anim_up.stop();
    });

    // anim down
    var anim_down_attributes = {
        scroll: { to: [0, elmHeight] }
    };
    var anim_down = new YAHOO.util.Scroll('menu_holder', anim_down_attributes);
    YAHOO.util.Event.on('scroll-down', 'mousedown', function() {
        anim_down.animate();
    });
    YAHOO.util.Event.on('scroll-down', 'mouseup', function() {
        anim_down.stop();
    });
    YAHOO.util.Event.on('scroll-down', 'mouseout', function() {
        anim_down.stop();
    }); 
})();
</script>

Answer 1

If I read the docs correctly:

If you assign the animation to a variable:

oAnim = new YAHOO.util.Anim(...);

Then you can call

oAnim.stop();

to stop the animation.

Hope this helps!