Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Fading div out smoothly

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #42269
    bogus
    Participant

    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!

    #122401
    neerukool
    Participant

    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.

    #122402
    bogus
    Participant

    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..

    #122417
    rosspenman
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.