javascript - 页面加载时，JQuery Stop Div 显示在屏幕上

Question

我正在使用这个脚本:http://wpaoli.building58.com/2009/09/jquery-tab-slide-out-plugin/

效果很好，但我的问题是，当页面加载时，div 会显示在屏幕中间......然后在页面加载后滑动到位。

看到屏幕上出现一个大 div 看起来不太好。

有办法阻止这种情况发生吗？

这是代码:

<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
<script type="text/javascript">
    $(function(){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',                     //class of the element that will become your tab
            pathToTabImage: 'image_button.gif', //path to the image for the tab //Optionally can be set using css
            imageHeight: '122px',                     //height of tab image           //Optionally can be set using css
            imageWidth: '37px',                       //width of tab image            //Optionally can be set using css
            tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
            speed: 300,                               //speed of animation
            action: 'click',                          //options: 'click' or 'hover', action to trigger animation
            topPos: '79px',                          //position from the top/ use if tabLocation is left or right
            leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
            fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
        });

    });

    </script>
    <style type="text/css">

      .slide-out-div {
          padding: 20px;
          width: 700px;
          background: #ffffff;
          border: 1px solid #ffffff;
          position:relative;
         z-index:999;
      }      
      </style>

....

<div class="slide-out-div">
   <a class="handle" href="#">Content</a>
   <h3>Title Here</h3>
   <p>Text here</p>
</div>

Answer 1

使用 CSS 从一开始就隐藏 div:

.slide-out-div {
    padding: 20px;
    width: 700px;
    background: #ffffff;
    border: 1px solid #ffffff;
    position:relative;
    z-index:999;
    display: none;
}

然后在页面加载时显示 div:

$('.slide-out-div').show().tabSlideOut({
  ...