Fadein With JQUERY on click with external html file

Question

So I have a page, and when a user clicks on one of the navigation links instead of changing page, it just loads the content from those pages into the div on the main page. I did this through using JQuery the .load and both of the tests that I tried, work perfectly with the .load.

What I wanted to see now was if instead just loading the content in all at once I wanted to fade in slowly to make more effect, and I was curious as whether I could do this the same way as I did the .load.

This is the code that I used in JQUERY to do the .load on the click:

   function loadPage(){

   $('#page').load ('art1.html #content');

    }

and then this function is called in the HTML as Follows:

   <a href="#" onclick="loadPage();">click me</a>

This works perfectly fine but I would prefer it if it faded in instead:

I know that I cannot just change the .load to to the .FadeIn as of the way that this written but how would I write the .fadeIn function.

page= The Div on the main page that I want the content loaded into

content= The div on the external HTML file where the content is written

You should always search the Stack Overflow and Google before asking a question on here :) — iConnor, Aug 23 '13 at 21:25

Smern · Accepted Answer · 2013-08-23T20:57:33.157

0

Try hiding the div before loading data into it, then fade it in after the data is loaded:

function loadPage() {
    var $page = $('#page');
    //if you have other content already in #page
    //and would like it to fade out, use fadeOut()
    //instead of hide()
    $page.hide(function () {
        $page.load('art1.html #content', function () {
            $page.fadeIn();
        });
    })
}

Fiddle (ignore what's being loaded, it was the simplest thing to do within this example :)

edited Aug 23 '13 at 20:57

answered Aug 23 '13 at 20:14

Smern

18,746
21
72
90

Sorry, Only just saw yours, Thank you, Yes that one worked :), Thank you Very much :) – April Aug 23 '13 at 21:00

score 0 · Answer 2 · edited May 23 '17 at 11:56

0

Actually I was able to do it by applying the effect to the wrapper div instead...

$('#PageWrapper').fadeIn('slow', function(){
   $('#page').load ('art1.html #content');
});

source

edited May 23 '17 at 11:56

Community

1
1

answered Aug 23 '13 at 20:15

Kevin Lynch

24,427
3
36
37

I tried this but it just made everything fade out instead, nothing faded back in. – April Aug 23 '13 at 20:32
i've simplified it. Put you div inside another div called `id="PageWrapper"` – Kevin Lynch Aug 23 '13 at 20:41

score 0 · Answer 3 · answered Aug 23 '13 at 20:17

0

This code will fade in over a period of 1/2 sec.

function loadPage(){
$('#page').hide().load('art1.html #content', function() {
     $('#page').fadeIn(500);
};

}

answered Aug 23 '13 at 20:17

Michael

112
4

Fadein With JQUERY on click with external html file

3 Answers3