jQuery fadeIn fadeOutはページのスクロールを行います

私は機能ブロックを作成したいワードプレス対応のWebサイトを用意しています。この特集されたブロックは、記事を次々と退色させるでしょう。 jQueryのfadeInとfadeOutのAPIを使用して動作させましたが、実装に問題があります。ユーザーがページの一番下に移動するまでfadeOut効果正常に動作している - fadeInがjQuery fadeIn fadeOutはページのスクロールを行います

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

- ここ

は、私が持っているコードです。ユーザーがページの最下部にいると、フェード・スイッチが発生したときにページ全体がスクロールします。

あなたはどのように私は、ページのスクロールを避けることができるアドバイスしてくださいhttp://www.ronakg.com

でこの動作を確認することができます。

編集：ここにHTMLコードはどのように見えるかだ -

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

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

...

出典

2011-09-28 ronakg

私は問題はないと思っていますが、ポイントを証明するために、 'jQuery（document）.ready（featured_block）;という行をコメントアウトするように提案するものはありません。（ドキュメント）.ready（featured_block）; 'ページがジャンプした場合、下にスクロールします。問題はフェードイン/アウトされません。それ以外の場合は、またはコールバック – Val

にフェードインとCSSを持つ静的height:属性をフェードアウトブロックの含む要素を与えてみてください。

ラップ<div id="featured">ブロックと別のdiv。

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

出典

2011-09-28 15:13:27

この場合、機能ブロックがフェードインでフェードアウトして別の場所でフェードアウトし、その場で動作しない場合があります。私は 'style =" display：none "'を使って、サイトが初めて読み込まれたときに他のブロックを隠しています。 – ronakg

ああ。ブロックは、もちろん、 'position：absolute; 'に設定する必要がありますので、それらはすべて同じ場所でフェードインまたはフェードインされます。 –

'position：absolute'がトリックをしました。しかし、既存の構造が本質的に相対的であるため、私はそれに応じて他の要素を調整しなければならなかった。 – ronakg

あなたは、 "＃"、ただfalseを返す置くためのhref iqualで<a>を使用している場合は、あなたのfeatured_block関数の終わりに問題を解決する必要があります。

出典

2015-09-18 05:06:41 lwdias

jQuery fadeIn fadeOutはページのスクロールを行います

答えて

関連する問題