jQuery fadeIn fadeOut powoduje przewijanie strony

Mam stronę z włączoną wordpress, w której chcę utworzyć polecany blok. Ten polecany blok zawiera artykuły, które zanikają jeden po drugim. Mam go działającego przy użyciu interfejsów API jQuery fadeIn i fadeOut, ale jest problem z implementacją.jQuery fadeIn fadeOut powoduje przewijanie strony

Oto kod mam -

var count=0; 
var sticky_count=<?php echo count($sticky);?>; 

jQuery(document).ready(featured_block); 

function featured_block() { 
    jQuery(".featured" + count % sticky_count).delay(5000).fadeOut(callback); 
} 

function callback() { 
    count++; 
    jQuery(".featured" + count % sticky_count).fadeIn().delay(5000); 
    jQuery(".featured" + count % sticky_count).fadeOut(callback); 
}

fadeIn - efekt fadeOut działa poprawnie dopóki użytkownik nawiguje na dole strony. Gdy użytkownik znajduje się u dołu strony, cała strona przewija się w górę, gdy pojawia się przełącznik zmiany odcienia.

Można to zobaczyć w akcji na http://www.ronakg.com

Proszę o poradę w jaki sposób można uniknąć przewijania strony.

EDIT: Oto jak wygląda kod HTML -

<div class="featured0"> 
    ... 
</div> 

<div class="featured1" style="display:none"> 
    ... 
</div> 

...

Źródło

2011-09-28 ronakg

Nie sądzę, że problem polega na tym, coz, nic tam nie sugeruje, aby udowodnić, o co chodzi, skomentuj linię 'jQuery (document) .ready (featured_block);' więc wygląda na to // // jQuery (document) .ready (featured_block); 'następnie przewiń na dole, jeśli strona przeskakuje, problem nie jest spowodowany zanikaniem/wygaśnięciem jego innego miejsca, w przeciwnym razie możesz spróbować użyć zwrotu false w polecanym bloku i/lub lub wywołanie zwrotne – Val

Spróbuj dając zawierający element bloki, które więdną i Fadeout statyczny height: atrybut z CSS.

Zawiń <div id="featured"> blok z innym elementem div.

<div id="rotator" style="height: 340px;"> 
    <div id="featured"> 
    ... 
    </div> 
</div>

Źródło

2011-09-28 15:13:27

Co się dzieje w takim przypadku, polecane bloki blakną w różnych lokalizacjach i nie są na miejscu. Używam 'style =" display: none "' do ukrycia innych bloków podczas ładowania strony po raz pierwszy. – ronakg

Ah. Bloki będą oczywiście musiały być ustawione na 'position: absolute ;, więc wszystkie będą pojawiać się i znikać w tym samym miejscu. –

'position: absolute' wykonał lewę. Jednak musiałem odpowiednio dostosować inne elementy, ponieważ istniejąca struktura miała względny charakter. – ronakg

Jeśli używasz <a> z href iqual do "#", wystarczy umieścić return false; na końcu funkcji featured_block, która powinna rozwiązać problem.

Źródło

2015-09-18 05:06:41 lwdias

jQuery fadeIn fadeOut powoduje przewijanie strony

Odpowiedz

Powiązane problemy