Question

我想创建一个适用于js和none-js访问者的网页。对于js-visitor，开始图像应淡入，因此必须先隐藏。目前它被隐藏得太晚，即当js已经加载时。我默认情况下无法隐藏它，因为在这种情况下，none-js访问者将无法看到它。有什么想法吗？

HTML

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

JS

 $('.startImage').hide().delay(200).fadeIn(200);

Answer 1

你应该只使用css淡化div。

.startImage {
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

使用JSFiddle -

http://jsfiddle.net/bpzpb00q/

Answer 2

CSS

.startImage {
display:none;
}

HEAD

<noscript>
  <style>.startImage {display:block}
  </style>
</noscript>

JS

$(document).ready(function() {
  $('.startImage').fadeIn(200)
});

Answer 3

在这种情况下，<noscript>标记会很有用，添加2个相同的元素，一个带有<noscript>标记的变形和另一个带有css的元素display:none

<noscript>
 <div class="startImage">...</div>
</noscript>
<div class="startImage forJS" style="display:none">...</div>

定位<selector> $(".startImage.forJS")

<script>
$(function(){
    $('.startImage.forJS').delay(200).fadeIn(200);
})
</script>

Answer 4

对非JavaScript用户使用<noscript>标记，并为JavaScript用户复制其内容。

对于重复的内容，添加类似.hidden的类修饰符，默认情况下将其设置为display: none。将fadeIn功能应用于它。

如果你不喜欢复制，你可以让JavaScript从<noscript>标签中获取内容，从中创建一个DOM元素并将其注入页面。

＆＃13;

$(function() {
  $('#box').delay(200).fadeIn();
});

＆＃13;

.box {
  width: 300px;
  margin: 0 auto;
  border: 1px solid #c66;
  background-color: #f99;
  color: #fff;
  font-size: 24px;
  padding: 24px;
  font-family: Helvetica, Arial;
  text-align: center;
}

.hidden {
  display: none;
}

＆＃13;

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<noscript>
  <div class="box">Content</div>
</noscript>
<div id="box" class="box hidden">Content</div>

＆＃13;

Answer 5

我会考虑使用<noscript>标记，如下所示：

$(window).load(function() {
    $("#startImage img").css("opacity", "1");
});

#startImage img {
	-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	-ms-transition:all 0.5s ease-in-out;
	-o-transition:all 0.5s ease-in-out;
	transition:all 0.5s ease-in-out;
}

<noscript>
    <style type="text/css">
        #startImage img {
            opacity: 1;
        }
    </style>
</noscript>
<style type="text/css">
    #startImage img {
        opacity: 0;
    }
</style>
<div id="startImage">
    <img src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" alt="Hero2" />
</div>

即使在运行代码段时它似乎不起作用，但以下demo应该适用于5种主流浏览器。

Answer 6

如果你使用fadeIn（200）到＆＃34; startImage＆＃34;类那么就没有必要隐藏选择器以及不需要延迟所以以上方法是正确的尝试

在加载时隐藏div

6 个答案: