<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$  
           
  
              Кстати, на чистом JS, без jQuery <img rel="usm" src="http://megasoft.3dn.ru/emoticons/Sypsena.gif" border="0" align="absmiddle" alt=":)">  
           
  
              Хотя кого это волнует.  
          </span>  
         </div>