How to add a fade effect to a .load-Function

Question

i got this code for requesting content from .php Files from my server:

function contentloader(dataid) {
            $("#content").load("controller.php?id="+dataid+"", {}, function() { $(this).fadeIn(900); });
        }

Links in my template working with "javascript:contentloader('sitename');" for example:

<a href=javascript:contentloader('home');>Home</a>

The content loads, but the fade-effect doesn't work, and i have no clue why. Maybe you can help me. Thank you very much.

possible duplicate of http://stackoverflow.com/questions/9337220/jquery-load-with-fadein-effect — Raja Asthana, Feb 06 '14 at 13:22

Arun P Johny · Accepted Answer · 2014-02-06T13:30:17.680

1

For fadeIn() to work the element has to be hidden first.

So try to use fadeTo() - fadeOut the existing content then fadeIn the new content

function contentloader(dataid) {
    $("#content").fadeTo(200, .5, function () {
        $(this).load("controller.php?id=" + dataid + "", {}, function () {
            $(this).fadeTo('normal', 1);
        });
    });
}

edited Feb 06 '14 at 13:30

answered Feb 06 '14 at 13:22

Arun P Johny

384,651
66
527
531

That works not as fine as i wanted. If i click on a link the content comes in, fades out, and fades in again. How to fade out before it loads? It doesn't seem to work for me. – dstN Feb 06 '14 at 13:28
@user3279720 use the fadeOut callback to load the content – Arun P Johny Feb 06 '14 at 13:30
Working now. Can i manipulate the DOM, so my "current" link gets the class "current"? And can i also manipulate the URL so if someone is refreshing the site, he's coming back where he was, and not to the index? //Edit: Ok the second question is partial solved. I found the links, but how can i manipulate the URL for the user? the url would be index.php?id=sitename – dstN Feb 06 '14 at 15:10

How to add a fade effect to a .load-Function

1 Answers1