Using .load() with .fadeIn (jQuery)

JavaScript
1

developing a portfolio, on the left side of the container are preview images the end user can click on, then on the right side of the wrapper is a <div> where all the information on that project/client will be displayed.

I’ve been trying to get the informational content (in the <div>) but haven’t had any luck.

When the user clicks the preview image, it calls “onClick=entry_info(id)”.

the id is placed in by PHP, and it comes from a database.

Here’s what the entry_info function looks like:


function entry_info(id) {
		$('#port_content').fadeIn('normal', function() {
		$('#port_content').load('../wp-content/themes/MattVanBlaricom-Default/php/port_entry_display.php?id='+id)
		});
}

#port_container is the <div> that will present all the information.

if you’d like a link… here it is: http://wordpress.mattvanblari.com/portfolio/

for some reason it’s not fading in… but just appearing…

any ideas?

2

Well, I would have prefered NL to win, but the book is pretty nice! I prefer it to the other one. So I guess that’s a silver lining :slight_smile:

3

Works great!

Thanks!

(Sorry to hear about the netherlands losing the cup… I was rooting for um. But I am glad that I got the free book from sitepoint :). Obvioiusly I need the help (with jQuery that is…:lol:))

4

The order is wrong - first you’re doing a fadeIn on visible content (so you see nothing) and then you’re loading the content.


function entry_info(id) {

    $('#port_content').fadeOut('normal', function() {
        $('#port_content').load('../wp-content/themes/MattVanBlaricom-Default/php/port_entry_display.php?id='+id, function() {
            $('#port_content').fadeIn('normal');
        })
    });

}

I’ve changed the function a little (and it’s untested). But what it does now is:
1 - fade the #port_content div out
2 - load new content into the div
3 - fade the #port_content div back in

Hopefully that will work a little better!