1

私の目標は、次のことを行う YUI アニメーション ユーティリティでアニメーションを作成することです。

  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 に答える