CODEWITHSUNDEEP
jqueryfadeout
Cress
Cress

Reputation: 65

How to slowly FadeOut an image ON LOAD using jQuery

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/

Upvotes: 0

Views: 2970

Answers (3)

mhps
mhps

Reputation: 166

try this:

$(document).ready(function(){     
    $('#namefade').fadeOut(5000);

});

http://jsfiddle.net/BdHmG/7/

Upvotes: 3

Seth
Seth

Reputation: 6260

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 shape
  • display:none will hide the element and collapse its shape

Upvotes: 1

rejj
rejj

Reputation: 1216

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.

Upvotes: 1

Related Questions