Make element disappear when page loads with jQuery/JavaScript

Question

I have a bunch of divs that I'd like to hide, but only when the page loads. I have other code that tells it to fade in when the user scrolls. Unfortunately, the code I'm trying to use

$(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');

});

makes the elements totally disappear, and they don't reappear when the user scrolls.

This is a sample of the code I'm using to show the elements when the user scrolls to the appropriate location. All the other elements use the exact same code, but with "#intro" substituted for "#causes", "#effets", etc.

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


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

});

Answer 1

Not sure what version of jQuery you're using but if it's one of the latest you should use $.on instead of $.bind , it's used the same way. Then fadeIn doesn't change the visibility, it changes the display and opacity of an element. So instead of adding a visibility: hidden; , add a display: none;

Here is the final result: http://jsfiddle.net/Cedriking/jsqff025/

Also I think the question is how to make it appear, not disappear :)

Answer 2

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

Answer 3

You can simply use the show() and hide() methods of jQuery. Your could be:

$(document).ready(function(){

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

});

Here is the fiddler: http://jsfiddle.net/tejsoft/utb61zvo/