页面加载时屏幕上显示JQuery Stop Div

JQuery Stop Div showing on screen when page is loading

本文关键字：显示 JQuery Stop Div 屏幕 加载      更新时间：2023-09-26

我使用的是这个脚本：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>

使用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({
  ...

只需将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>

我使用了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()
    });
相关文章：