onmousedown事件和onmouseup使用YUI動畫實用

Question

我的目標是與執行以下操作的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> 

Answer 1

如果我正確地閱讀文檔：

如果分配動畫一個變量：

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

然後就可以調用

oAnim.stop(); 

停止動畫。

希望這會有所幫助！