的jQuery /淡入，淡出滾動窗口頂部

Question

乾杯，

我有一個jQuery旋轉木馬一個奇怪的副作用，我使用旋轉圖像夫婦 - 每次淡入（？或淡出）時，窗口滾動到頂部。有時它會滾動到父對象的頂部，有時甚至更高 - 似乎沒有真正的錨點或此副作用引用的座標。這裏是標記（我從SO答案中借用了一些腳本，但現在找不到作者，對不起......）。

HTML

<div id="carousel"> 
<div id="carousel_inner"> 
<ul id="carousel_ul"> 

<li> 
<p><a href="url_1">Label 1</a></p> 
<a href="url_1"><img src="src_1" /></a> 
</li> 

<li> 
<p><a href="url_2">Label 2</a></p> 
<a href="url_2"><img src="src_2" /></a> 
</li> 

<li> 
<p><a href="url_3">Label 3</a></p> 
<a href="url_3"><img src="src_3" /></a> 
</li> 

<li> 
<p><a href="url_4">Label 4</a></p> 
<a href="url_4"><img src="src_4" /></a> 
</li> 

</ul> 
</div> 
</div> 

包含在UL的元件被示出在下面的序列：123，234，341，412，123 ...他們被認爲淡出和淡入在一起。 這裏是JS代碼：

$(document).ready(function() { 

     var item_width = $('#carousel_ul li').outerWidth()+10; 
     var left_indent = parseInt($('#carousel_ul').css('left')) - item_width; 
     var counter = 0; 

     $('#carousel_ul').hover(function(){ 
             clearInterval(spinner); 
             }, 
           function(){ 
             spinner = setInterval(spin, tempo); 
            } 
           ); 

     function spin(){ 
       $('#carousel_ul').fadeOut(300,function(){ 
        $('#carousel_ul').css('left' , left_indent); 
        $('#carousel_ul li:last').after($('#carousel_ul li:first')); 
        $('#carousel_ul').css('left','0px'); 
       }); 
       $('#carousel_ul').fadeIn(300); 
     } 

     var spinner = setInterval(spin, tempo); 

    }); 

終於CSS

#carousel_inner { 
float:left; 
width:950px; 
overflow: hidden; 
background: #fff; 
} 

#carousel_ul { 
position:relative; 
left:0px; 
list-style-type: none; 
margin: 0px; 
padding: 0px; 
width:9999px; 
padding-bottom:10px; 
} 

#carousel_ul li{ 
float: left; 
width:310px; 
padding:0px; 
height:310px; 
background: #fff; 
margin-top:10px; 
margin-bottom:10px; 
margin-left:0px; 
margin-right:10px; 
line-height: 310px; 
} 

#carousel_ul li a { 
display: block; 
color: #000; 
text-decoration: none; 
font-weight:normal; 
font-size: 1.5em; 
} 

#carousel_ul li p { 
display: none; 
} 

#carousel_ul li:hover p { 
display: block; 
z-index: 1000; 
position: absolute; 
background: url(../images/home-opener-bg.png); 
width: 310px; 
height: 310px; 
top: 10px; 
text-align: center; 
margin: 0px; 
padding: 3px 5px; 
} 

#carousel_ul li img { 
.margin-bottom:-4px; 
border:0px; 
position: relative; 
} 

所以我的問題是：爲什麼它跳？

Answer 1

如果我正確理解你的問題，一旦圖像淡出父的顯示屬性設置爲none。所以HTML的其餘部分只是用來填充空間。指定容器元素的高度應該這樣做。

我傾向於使用jQuery的週期插件與畫廊工作時：http://jquery.malsup.com/cycle/

Answer 2

錨標籤的點擊return false下您的UL