YUI 动画实用程序的 onmousedown 和 onmouseup

Question

我的目标是使用 YUI 动画实用程序创建一个动画，该实用程序执行以下操作：

1. 用户单击按钮。 元素开始从 A 点移动到 B 点
2. 用户释放光标或将光标移离按钮。 元素停止并停留在当前位置。
3. 用户再次单击该按钮。 该元素从当前位置向 B 点进行动画处理。

我看不到用 YUI 执行此操作的方法。 所有示例都显示一个按钮，单击该按钮会导致发生设定的动画序列（没有开始和停止）。

我怎样才能用 YUI 做到这一点？

伊勒布尔的回答有效！ 这是完整的工作代码：

<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

如果我正确地阅读了文档：

如果将动画分配给变量：

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

那么您可以调用

oAnim.stop();

来停止动画。

希望这可以帮助！