jQuery Fade Out an <ul> and Fade In Info From DB

Question

On my portfolio page I have this setup:

<div id="portfolio">
        <ul id="sites">
          <li>
            <h3><a href="#">MotorSomethin</a></h3>
            <img src="http://dummyimage.com/265x100/000/fff" />
            <p>
              We tried going for a very dark but flashy look for this website. Hence the reason we used flash.
            </p>
          </li>
          <li>
            <h3><a href="#">MotorSomethin</a></h3>
            <img src="http://dummyimage.com/265x100/000/fff" />
            <p>
              We tried going for a very dark but flashy look for this website. Hence the reason we used flash.
            </p>
          </li>
          <li>
            <h3><a href="#">MotorSomethin</a></h3>
            <img src="http://dummyimage.com/265x100/000/fff" />
            <p>
              We tried going for a very dark but flashy look for this website. Hence the reason we used flash.
            </p>
          </li>
          <li>
            <h3><a href="#">MotorSomethin</a></h3>
            <img src="http://dummyimage.com/265x100/000/fff" />
            <p>
              We tried going for a very dark but flashy look for this website. Hence the reason we used flash.
            </p>
          </li>
          <li>
            <h3><a href="#">MotorSomethin</a></h3>
            <img src="http://dummyimage.com/265x100/000/fff" />
            <p>
              We tried going for a very dark but flashy look for this website. Hence the reason we used flash.
            </p>
          </li>
        </ul>
      </div>

So imagine a grid, 2 sites per line.

I want to use jQuery so that when I click the H3, the image, or the paragraph inside the LIE(which are all information about a certain site), it would fade out the entire UL, then grab info about that site from our database.

I think this requires AJAX but I don't have much experience with it. I'm also confused on how to use jQuery to write the new HTML after the information is grabbed.

Answer 1

Not 100% sure what you want, but try something like this:

$("li").click(function() {
    $("#portfolio").fadeOut();

    // This performs an ajax-request to the "url/to/fetch". 
    // Then puts the result in the portfolio-div. finally 
    // it fades the results back in.
    $.get("url/to/fetch",{},function(data) {
        $("#portfolio").html(data);    
        $("#portfolio").fadeIn();
    });
});