使用jQuery / JavaScript加载页面时，使元素消失

Question

我有一堆要隐藏的div，但仅在页面加载时才隐藏。 我还有其他代码可以告诉它在用户滚动时淡入。 不幸的是，我正在尝试使用的代码

$(document).ready(function(){

    $('#intro').css('visibility', 'hidden');
    $('#causes').css('visibility', 'hidden');
    $('#effets').css('visibility', 'hidden');
    $('#traitements').css('visibility', 'hidden');
    $('#conclusion').css('visibility', 'hidden');
    $('#sources').css('visibility', 'hidden');

});

使元素完全消失，并且在用户滚动时它们不会重新出现。

这是当用户滚动到适当位置时用于显示元素的代码示例。 所有其他元素使用完全相同的代码，但用“ #intro”代替“ #causes”，“＃effets”等。

$(window).bind("scroll", function() {


    if ($(this).scrollTop() > 200) {
        $("#intro").fadeIn();
    }

});

Answer 1

不确定使用的是哪个版本的jQuery，但是如果它是最新版本的jQuery，则应使用$.on而不是$.bind ，它的使用方式相同。 然后fadeIn不会更改可见性，它会更改元素的显示和不透明度 。 因此，与其添加visibility: hidden; ，添加display: none;

这是最终结果： http : //jsfiddle.net/Cedriking/jsqff025/

我也认为问题是如何使其出现而不是消失:)

Answer 2

使用$('#element').css('display', 'none');

Answer 3

您可以简单地使用jQuery的show（）和hide（）方法。 您可能是：

$(document).ready(function(){

    $('#intro').hide();
    $('#causes').hide();
    $('#effets').hide();
    $('#traitements').hide();
    $('#conclusion').hide();
    $('#sources').hide();

});

这是提琴手： http : //jsfiddle.net/tejsoft/utb61zvo/