我正在使用这个脚本: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({
...
关于javascript - 页面加载时，JQuery Stop Div 显示在屏幕上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9326481/