<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>
   <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>