Grow your CSS skills. Land your dream job.

Fading div out smoothly

  • # January 26, 2013 at 10:36 am

    Hey all!

    I have a preloader that preloads a background picture.

    See it here on [CodePen](http://codepen.io/anon/pen/ckxwp “”).

    It sets the div with the id “preload” to .hide when the image has loaded. It works well but I wonder if there is a way to have it fading in and out more smoothly. I put in some fade out values but it only fades a bit and than disappears abruptly.
    Also is there a way to have it show up smoothly rather than it’s directly visible on page load?

    Thanks for any input!

    # January 26, 2013 at 12:19 pm

    I couldn’t see actual image loading. The loader was going on continuously.
    Anyways, just use fadeIn() for your image that loads and fadeOut() for loading gif. No need for .hide().

    But just make sure that the position of both image elements are independent of each other. i.e. visibility of one image should not affect position of other since both images will be visible at same time for some time.

    # January 26, 2013 at 12:40 pm

    wowo that worked. I took out the .hide and no it’s fading out smoothly!

    but how will i get to fade it in when the page loads? now it’s just there..

    # January 26, 2013 at 3:52 pm

    You could either do it with CSS animations, or just run

    $(“#preload”).hide().fadeIn();

    once the DOM is ready. (Just at the start of your last `

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".