Reputation: 316
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
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
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