OnMouseDown и OnMouseUp с YUI Animation Utility

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

, чтобы остановить анимацию.

Надеюсь, это поможет!