问题
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/
回答1:
try this:
$(document).ready(function(){
$('#namefade').fadeOut(5000);
});
http://jsfiddle.net/BdHmG/7/
回答2:
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.
回答3:
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:hiddenwill hide the element but keep its shapedisplay:nonewill hide the element and collapse its shape
来源：https://stackoverflow.com/questions/8703957/how-to-slowly-fadeout-an-image-on-load-using-jquery