On my webpage, when a user clicks on a navigation link, instead of changing to a new page, the content from the linked pages loads into a div on the main page using JQuery and .load function. Both tests worked perfectly with this implementation.
Now, I want to enhance the user experience by fading in the content slowly instead of loading it all at once. I'm curious if I can achieve this using the same method as .load function.
Here is the JQUERY code I used for .load function:
function loadPage(){
$('#page').load('art1.html #content');
}
This function is then called in the HTML like this:
<a href="#" onclick="loadPage();">click me</a>
While this works fine, I would prefer if the content faded in instead:
I understand that I cannot simply change .load to .fadeIn in the existing code. How can I write the .fadeIn function to achieve this effect?
page = The div on the main page where the content should be loaded
content = The div on the external HTML file containing the content