I want to have an image fade out slowly on load. Idea is that my name, which you click to enter my site, stays briefly on my homepage, like a visual echo from my intro page.
I'm sure its a snitch, but I'm new to coding and so I am struggling.
I've gleaned that I need to have css visibility:hidden; (not sure if I need to put this in the jquery or in the actual css, or both) as I want the other elements on my page not to jump when image fully dissappears.
NB have substituted image for text in the jsfiddle
http://jsfiddle.net/cress/BdHmG/1/
try this:
$(document).ready(function(){
$('#namefade').fadeOut(5000);
});
http://jsfiddle.net/BdHmG/7/
Try the following
$(document).ready(function(){
$('#namefade').fadeOut('slow', function() { $(this).css({visibility: 'hidden', opacity: 0})});
});
Changes from what you had:
- use
$(document).ready() instead of $(window).load()
- fadeout before altering css
- alter css in the callback at the end of the animation, not right away
The .fadeOut() function takes an optional second parameter, which if defined and is a function will be called in the context of every item that has completed fading out. This is true for all of jQuery's animation functions.
You need to do something like this.
http://jsfiddle.net/BdHmG/4/
I'm wrapping my content that is fading out inside of a div. I'm then setting the height of that div to the height of whatever your image size would be.
Just so you know:
visibility:hidden will hide the element but keep its shapedisplay:none will hide the element and collapse its shape
