Question

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

用户点击一个按钮。元素开始从A点移动到B点
用户释放光标或将光标移开按钮。元素停止并保持在当前位置。
用户再次点击该按钮。该元素从其当前位置动画到B点。

我无法通过YUI看到这样做的方法。所有示例都显示一个按钮，单击该按钮会导致设置动画序列（无法启动和停止）。

如何使用YUI执行此操作？

Ylebre的回答有效！这是完整的，有效的代码：

<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();

停止动画。

希望这有帮助！

使用YUI动画实用程序onmousedown和onmouseup

1 个答案: