jQuery / fadeIn，fadeOut将窗口滚动到顶部

Question

Cheers,

I have a strange side effect from a jQuery carousel I am using to spin couple of images - every time it fades in (or fades out?), the window is scrolled to the top. Sometimes it scrolls to the top of the parent object, sometimes even higher - there seems to be no real anchor or coordinates which this side effect references. Here is the markup (I have borrowed some lines of the script from SO answers, but I can't find the author now, sorry...).

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>

The elements contained in the UL are shown in the following sequence: 123, 234, 341, 412, 123... They are thought to fade out and fade in together. Here is the JS code:

$(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);

  });

and finally 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;
}

So my question is: why does it jump?

Answer 1

单击您的ul下的锚标记return false

Answer 2

If I understand your question correctly, once the image fades out the display property of the parent is set to none. So the rest of the HTML just flows up to fill up the space. Specifying a height for the container element should do it.

I tend to use the jQuery Cycle plugin when working with galleries : http://jquery.malsup.com/cycle/