1

要素を順番にフェードインおよびフェードアウトする次のjqueryがあります。

var $zfader = jQuery.noConflict();
$zfader(document).ready(function(){
$zfader('.fadethis .fade');
    setInterval(function(){
        $zfader('.fadethis .fade').filter(':visible').fadeOut(2000,function(){
            if($zfader(this).next('.fade').size()){
                $zfader(this).next().fadeIn(1000);
            }
            else{
                $zfader('.fadethis .fade').eq(0).fadeIn(1000);
            }
        });
    },10000);   
});

html :

    <div class="container fadethis">
        <div class="fade">number one</div>
        <div class="fade" style="display:none">number two</div>
    </div>

問題は、display:none を使用したくないことです... .fade に position:absolute を設定することを考えていたので、それらはすべて互いに「上」にあり、不透明度で同じ効果を達成していますか? 第二に、JavaScript がオフになっているかどうかを確認したいのですが、最初の部分だけが表示されます...

4

2 に答える 2

0

seo が必要で、javascript が無効になっているときに要素を表示したくない場合は、次のようにクラスを使用して要素を画面外に描画し、要素を最小化できます。

.minimize
{
 position: absolute;
 height: 0px;
 width: 0px;
}​

次に、次のようにスクリプトでそのクラスを削除します。

$zfader('.minimize').removeClass('minimize');

スタイルを少し変更して、次のように要素をオーバーラップさせることができます。

style="position:absolute;vertical-align:top;"

これが最終的な解決策です（jsfiddleの例を使用）

html:

<div>Some Space</div>
<div class="container fadethis">
 <div class="fade" style="position:absolute;vertical-align:top;">number one</div>
 <div class="fade minimize" style="position:absolute;vertical-align:top;">number two</div>
</div>​

CSS:

.minimize
{
 position: absolute;
 height: 0px;
 width: 0px;
}  ​

js:

var $zfader = jQuery.noConflict();
$zfader(document).ready(function(){
 $zfader('.fadethis .fade').eq(1).hide();
 $zfader('.minimize').removeClass('minimize');
 setInterval(function(){
  var hidden = $zfader('.fadethis .fade').filter(':hidden');
  var visible = $zfader('.fadethis .fade').filter(':visible');
  visible.fadeOut(2000,function(){
   hidden.fadeIn(1000);
  });
 },10000);
});​

jsfiddle の例: http://jsfiddle.net/3FQDL/4/

于 2012-11-13T21:43:49.360 に答える
0

あなたの懸念が SEO である場合、どのように div を目立たなくしても問題ありません。見にくいと見なされ、キーワードが詰め込まれている可能性があると、害になります。Google のような検索エンジンは、display:none; をチェックするだけではありません。テキストが背景と同じ色である場合、テキストの不透明度が低すぎる場合なども同様です。

SEO が気になる場合は、デザインを再考することをお勧めします。なぜこのフェード効果が必要なのですか? 情報のレイアウトに役立っていますか? ユーザーは、情報にアクセスしやすくなったと感じていますか? そうでない場合は、再設計します。

于 2012-11-13T21:34:36.603 に答える