title: onmousedown and onmouseup with YUI Animation Utility
body: <p>My goal is to create an animation with the YUI Animation Utility that does the following:</p>
  
  <ol>
  <li>The user clicks a button. An element begins moving from point A to point B</li>
  <li>The user releases or moves the the cursor off the button. The element stops and stays in its current position.</li>
  <li>The user clicks the button again. The element animates from its current position toward point B.</li>
  </ol>
  
  <p>I can't see a way to do this with YUI. All the examples show a button that, when clicked, causes a set animation sequence to occur (no starting and stopping).</p>
  
  <p>How can I do this with YUI?</p>
  
  <p>Ylebre's answer worked! Here is the full, working code:</p>
  
  <pre><code>&lt;style&gt;
  #menu_holder {
      height:100px;
      width:150px;
      overflow:auto;
  }
  &lt;/style&gt;
  &lt;div id="menu_holder"&gt;
  &lt;ul id="menu"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Example Link&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Example Link&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Example Link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;button id="scroll-up"&gt;Scoll Up&lt;/button&gt;&lt;br&gt;
  &lt;button id="scroll-down"&gt;Scoll Down&lt;/button&gt;
  
  &lt;script&gt;
  (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();
      }); 
  })();
  &lt;/script&gt;
  </code></pre>