使用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/