Question

I have searched through StackOverflow posts and various forums, but cannot find an answer. I have found answers for similar questions, but nothing breaks it down quite enough for me to understand. I understand a good deal of PHP and HTML, but am having difficulty with scripts.

How can I click on a link, get the href (or what do I need?), have it fade out the current content, find the content I’m trying to load (href or whatever in the link) and load it, then fade it in?

My previous problems with random bits of code I’ve tried:

1. While going from page to page if another link was clicked while loading, it would only partially fade the second page in.

2. Each link had to have it’s own script to direct it there. Could never figure out how to make it get the href of the link clicked.

3. Examples were so complicated I couldn’t modify them to what I needed exactly. I need to understand the process of it.

Answer 1

Something like:

$('.link').on('click', function(){
   $('.content').fadeOut().load('/path/to/script', function() {
      $(this).fadeIn();
   });
});

The key to this to use a HTML page or PHP script which can return the content you want. You might want to retrieve the URL from another element or hard-code it into your script – your call. For more information about how load() works, visit jQuery’s documentation.