onmousedown et onmouseup avec YUI utilitaire d'animation

Question

Mon but est de créer une animation avec l'utilitaire d'animation YUI qui effectue les opérations suivantes:

1. L'utilisateur clique sur un bouton. Un élément commence à se déplacer du point A au point B
2. L'utilisateur libère ou déplace le curseur du bouton. L'élément s'arrête et reste dans sa position actuelle.
3. L'utilisateur clique à nouveau sur le bouton. L'élément s'anime à partir de sa position actuelle vers le point B.

Je ne vois pas un moyen de le faire avec YUI. Tous les exemples montrent un bouton qui, lorsqu'il est cliqué, provoque une séquence d'animation définie (pas de démarrage et d'arrêt). Comment puis-je faire avec YUI?

La réponse de Ylebre a fonctionné! Voici le plein, le code de travail:

<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

Si je lis les documents correctement:

Si vous attribuez l'animation à une variable:

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

Ensuite, vous pouvez appeler

oAnim.stop(); 

pour arrêter l'animation.

Espérons que cela aide!