JustMe
JustMe

Reputation: 316

Make element disappear when page loads with jQuery/JavaScript

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();
    }

});

Upvotes: 0

Views: 117

Answers (3)

TejSoft
TejSoft

Reputation: 3315

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/

Upvotes: 0

Abel D
Abel D

Reputation: 1080

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

Upvotes: 1

Zeus
Zeus

Reputation: 140

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 :)

Upvotes: 2

Related Questions