SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fade Out Before Changing Pages?

    I'm able to fade in content fine with this
    Code JavaScript:
    $('#burrito').animate({'opacity' : 0}, 0);
       fadeInDivs(['#burrito']);
     
     
    function fadeInDivs(els) {
        e = els.pop();
        $(e).delay(750).animate({'opacity' : 1}, 1000, function(){
            if (els.length) fadeInDivs(els);
        })
    }

    but how do I fade out the #burrito div before the page changes?

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you sure you really want to do that because it'll delay the new page being opened to the user by the time it takes to fade out the div? It could be very annoying for some users (including me ).

    But in any case, you could put an onclick event handler on a link that first fades out the div and then redirects to the target page for the link.

  3. #3
    SitePoint Member PaulPov's Avatar
    Join Date
    Dec 2011
    Location
    Saint-Petersburg, Russia
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I absolutely agree with what webdev1958 is saying. When working on my site I found it very annoying to have a 100ms page fade in and got rid of it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •