页面加载时，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({
  ...

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()
    });