淡入和淡出格 - jQuery的

Question

我有以下的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> 

問題是我不想要使用顯示：無...我想設置一個位置：絕對的.fade，所以他們都在彼此「頂部」，並享受與不透明相同的效果？其次，我想確保JavaScript是否關閉，只有第一個顯示...

Answer 1

如果你的關注是搜索引擎優化，它不關心你如何使div更不明顯，它會傷害你，如果它被認爲是難以看到，因此可能是關鍵字填充。像谷歌這樣的搜索引擎不只是檢查顯示：無;但如果文字顏色與背景顏色相同，則文字上的透明度太低等。

如果您關注搜索引擎優化，則可能需要重新考慮您的設計。你爲什麼想要這種淡入淡出效果？它有助於您的信息佈局嗎？用戶是否覺得他們能夠更好地訪問信息？如果沒有，重新設計。

Answer 2

如果你想搜索引擎優化，但在禁用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/