我正在构建一个基于JQuery的照片库，其中包含导航标签，用于在缩略图页面之间进行排序。功能现在大部分都存在，但是当页面首次加载选项卡中的所有图像时，将一些像素加载到其正确位置的右侧，然后向左移动。他们在正确的地方结束但看起来很乱。
我认为是因为我必须在我的JQuery代码中构建一些活动的CSS更改才能使标签正确更改，但我无法弄清楚我在初始代码中的位置来修复它。这是我的HTML，CSS和JQuery，任何人都可以看到这个问题吗？
jsFiddle ：http://jsfiddle.net/Cmb9p/
HTML
<body>
<div class="page_container">
<div class="gallery_credit"><h1>Illisia Adams</h1></div>
<div class="gallery_type"><h1>Gallery 1</h1></div>
<div class="clear_both"></div>
<div class="gallery_top"></div>
<div class="gallery_content">
<div class="sp">
<div class="tabs">
<span>Page 1</span>
<span>Page 2</span>
<span>Page 3</span>
</div>
<div class="gallery_thumbnails">
<div class="panels">
<div class="panel">
<div class="panel_content">
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<div class="clear_both"></div>
</div>
</div>
<div class="panel">
<div class="panel_content">
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<div class="clear_both"></div>
</div>
</div>
<div class="panel">
<div class="panel_content">
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<div class="clear_both"></div>
</div>
</div>
</div>
</div>
</div>
<div class="gallery_preview">
img
</div>
<div class="clear_both"></div>
<div class="gallery_caption">text</div>
<div class="clear_both"></div>
<div class="gallery_preload_area"></div>
</div>
<div class="gallery_bottom"></div>
</div>
</body>
CSS
.sp {
width: 500px;
float: left;
position: relative;
}
.sp .tabs {
position: relative;
z-index: 101;
display: block;
}
.sp .tabs span {
background-color: #000;
display: inline-block;
margin: 0px;
padding-top: 8px;
padding-right: 12px;
padding-bottom: 8px;
padding-left: 12px;
border: 1px solid #999;
position: relative;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
cursor: pointer;
}
.sp .tabs span.selected {
color: #999;
border-bottom: 1px solid #000;
}.sp .gallery_thumbnails {
float: left;
width: 500px;
height: 277px;
border: 1px solid #999;
margin-top: -1px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 5px;
clear: both;
padding-top: 26px;
padding-bottom: 40px;
padding-left: 4px;
border-radius: 5px;
overflow: hidden;
position: relative;
z-index: 100;
}
.sp .gallery_thumbnails a {
display: block;
float: left;
height: 75px;
width: 75px;
border: 1px solid #999;
margin-top: 5px;
margin-right: 11px;
margin-bottom: 20px;
margin-left: 11px;
border-radius: 5px;
}
.sp .gallery_thumbnails a:hover {
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
}
.sp .gallery_thumbnails a:active {
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
}
.sp .gallery_thumbnails a:visited {
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
}
.sp .gallery_thumbnails .panel .panel_content {
padding-left: 5px;
}
.sp .gallery_thumbnails .panel .panels{
position: absolute;
}
.sp .gallery_thumbnails .panel {
height: 277px;
position: absolute;
}
.page_container {
padding: 0px;
width: 960px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.gallery_credit {
padding: 0px;
float: left;
width: 425px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 2px;
margin-left: 15px;
}
.gallery_type {
text-align: right;
float: left;
width: 500px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 2px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.gallery_top {
background-image: url(../Images/Template/page_top.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
margin: 0px;
padding: 0px;
height: 20px;
}
.gallery_content {
background-image: url(../Images/Template/page_tile.jpg);
background-repeat: repeat-y;
background-position: 0px 0px;
margin: 0px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 2px;
padding-left: 25px;
text-align: right;
}
.gallery_preview {
padding: 0px;
float: right;
height: 377px;
width: 377px;
margin-top: 0px;
margin-right: 30px;
margin-bottom: 10px;
margin-left: 0px;
border-radius: 5px;
overflow: hidden;
}
h1 {
font-size: 1.75em;
font-weight: normal;
color: #FFF;
letter-spacing: 2px;
margin: 0px;
padding: 0px;
}
a img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.gallery_caption {
float: left;
width: 375px;
text-align: left;
margin: 0px;
padding-left: 530px;
}
a.contactlink {
text-transform: uppercase;
color: #FFF;
text-decoration: none;
background-image: url(../Images/Template/link_email.png);
background-repeat: no-repeat;
background-position: right 0px;
margin: 0px;
padding-top: 0px;
padding-right: 30px;
padding-bottom: 0px;
padding-left: 0px;
}
p {
color: #999;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 12px;
margin-left: 0px;
}
a.zoom {
color: #FFF;
text-decoration: none;
background-image: url(../Images/Template/link_zoom.png);
background-repeat: no-repeat;
background-position: 0px 0px;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 20px;
}
.gallery_bottom {
background-image: url(../Images/Template/page_bottom.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
margin: 0px;
padding: 0px;
height: 20px;
}
body {
background-color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.75em;
color: #FFF;
}
.clear_both {
line-height: 1px;
clear: both;
}
.gallery_preview a {
display: block;
height: 375px;
width: 375px;
border: 1px solid #999;
margin-right: 0px;
margin-bottom: 0px;
}
.gallery_preview a:hover {
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
}
.gallery_preview a:visited {
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
}
.gallery_preload_area {
display: none;
}
的JavaScript
var panelWidth = 0;
var startPanel = 1;
$(document).ready(function() {
/* Active Styling */
$('.sp .tabs').css('display','block');
$('.sp .gallery_thumbnails .panel').css({'position':'absolute', 'height':'277px'});
$('.sp .gallery_thumbnails .panels').css({'position':'absolute'});
window.panelWidth = $('.sp').width();
/* Position the panels */
$('.gallery_thumbnails .panel').each(function(index){
$(this).css({'width':window.panelWidth+'px','left':(index*window.panelWidth)});
$('.sp .panels').css('width',(index+1)*window.panelWidth+'px');
});
/* Add click events to tabs */
$('.sp .tabs span').each(function(){
$(this).on('click', function(){
changePanels( $(this).index() );
});
});
/* Trigger the starting panel */
$('.sp .tabs span:nth-child('+window.startPanel+')').trigger('click');
});
function changePanels(newIndex){
var newPanelPosition = ( window.panelWidth * newIndex ) * -1;
var newPanelHeight = $('.sp .panel:nth-child('+(newIndex+1)+')').find('.panel_content').height() + 15;
$('.sp .tabs span').removeClass('selected');
$('.sp .tabs span:nth-child('+(newIndex+1)+')').addClass('selected');
$('.sp .panels').animate({left:newPanelPosition},1000);
$('.sp .panel_container').animate({height:newPanelHeight},1000);
}