jQueryの/フェードイン、

Question

乾杯をトップにフェードアウトスクロールウィンドウ、

私は、画像のカップルを回転させるために使用していますjQueryのカルーセルから奇妙な副作用がある - （？またはフェードアウト）それがフェードインするたびに、ウィンドウが上にスクロールされます。場合によっては親オブジェクトの上部にスクロールすることがあります。さらに高次の場合もあります。この副作用が参照する実際のアンカーまたは座標がないようです。ここではマークアップです（私はSOの答えからいくつかの行を借りましたが、今は著者を見つけることができません、残念です...）。 ULに含まれる要素は以下の順序で示されている

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> 

：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); 

    }); 

し、最終的に

#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; 
} 

は、だから私の質問はCSS：なぜそれがジャンプしていますか？アンカータグのクリックで

Answer 1

私が正しくあなたの質問を理解していれば、画像がフェードアウトしたら、親の表示プロパティがnoneに設定されています。だから、残りのHTMLはちょうどそのスペースを埋めるために流れていく。コンテナ要素の高さを指定すると、それが行われます。

私はギャラリーでの作業時jQueryのサイクルのプラグインを使用する傾向がある：http://jquery.malsup.com/cycle/

Answer 2

return falseあなたのULの下