加载页面时，JQuery停止在屏幕上显示页面

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从start隐藏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({
  ...

Answer 2

只需将display:none添加到类定义中：

<style type="text/css">

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

Answer 3

我使用了Guffa的解决方案，但必须更改其中的一部分。我没有编辑他的答案，而是修改如下：

使用CSS隐藏开始时的滑块：

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

然后将新的SHOW代码放在初始tabslideout声明之后：

$(function(){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',              
            pathToTabImage: 'image_button.gif',
            imageHeight: '122px',                    
            imageWidth: '37px',                      
            tabLocation: 'left',                     
            speed: 300,                              
            topPos: '79px',                          
            leftPos: '20px',                          
            fixedPosition: false                      
        });
    $('.slide-out-div').show()
    });