1

I have the following jquery which will fade elements in and out in order :

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>

The problem is I do not want to use the display:none... I was thinking setting a position:absolute on .fade so they are all 'on top' of each other and acheiving the same effect with opacity? Secondly, I want to ensure if JavaScript is off that only the first shows...

4

2 回答 2

0

如果您关心的是搜索引擎优化，那么您如何使 div 不那么明显并不重要，如果它被认为难以看到并因此可能会造成关键字填充，则会伤害您。像 Google 这样的搜索引擎不只是检查 display:none；而且如果文本与背景颜色相同，文本的不透明度太低等。

如果您担心 SEO，您可能需要重新考虑您的设计。为什么要这种淡化效果？它是否有助于您的信息布局？用户是否觉得他们能够更好地访问信息？如果没有，请重新设计。

于 2012-11-13T21:34:36.603 回答
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 回答