1

我的目标是使用 YUI Animation Utility 创建一个动画，它执行以下操作：

  1. 用户单击一个按钮。一个元素开始从 A 点移动到 B 点
  2. 用户释放或将光标移离按钮。元素停止并停留在其当前位置。
  3. 用户再次单击该按钮。元素从其当前位置向 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>
4

1 回答 1

1

如果我正确阅读了文档：

如果将动画分配给变量：

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

然后你可以打电话

oAnim.stop();

停止动画。

希望这可以帮助！

于 2009-07-07T18:02:16.513 回答