JQuery / FadeIn, FadeOut прокручивает окно вверх - PullRequest
Новая
       15

JQuery / FadeIn, FadeOut прокручивает окно вверх

0 голосов
/ 08 февраля 2011

Cheers,

У меня есть странный побочный эффект от карусели 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;
}

Итак, мой вопрос: почему он прыгает?

Ответы [ 2 ]

1 голос
/ 08 февраля 2011

return false по щелчку якорной метки под вашим ul

0 голосов
/ 08 февраля 2011

Если я правильно понимаю ваш вопрос, как только изображение исчезнет, ​​для свойства display родителя будет установлено значение none.Таким образом, остальная часть HTML просто растекается, чтобы заполнить пространство.Указание высоты для элемента контейнера должно сделать это.

Я склонен использовать плагин jQuery Cycle при работе с галереями: http://jquery.malsup.com/cycle/

...