<script type="text/javascript">
      function slide(obj, direction, a) {
       clearInterval(window.z);
       counter = 0;
       z = setInterval(function () {
        if (a ? parseInt(obj.style.marginTop) < 0 : parseInt(obj.style.marginTop) > -300) {
         obj.style.marginTop = parseInt(obj.style.marginTop) + direction;
         counter++;
        } else {
         clearInterval(z);
        }
       },
       10);
      }
      var pad = document.getElementById('x');
      pad.onmouseover = function () {
       slide(this, 3, true);
      }
      pad.onmouseout = function () {
       slide(this, -3, false);
      }
      </script>

  <div id="x" style="width: 100%; height: 300px; border-bottom: 5px dashed #eee; background: #555; position: absolute; margin-top: -300px;">
       <span style="color: white; font-weight: bold;">
           Slide Panel by $USERNAME$
        <br />
           Кстати, на чистом JS, без jQuery <img rel="usm" src="http://megasoft.3dn.ru/emoticons/Sypsena.gif" border="0" align="absmiddle" alt=":)">
        <br />
           Хотя кого это волнует.
       </span>
      </div>