jQuery Fade Out <ul>и Fade In Info из БД

Question

На странице моего портфолио у меня есть эта настройка:

<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>

Итак, представьте сетку, 2 сайта в строке.

Я хочу использовать jQuery, чтобы при щелчке по H3, изображению или абзацу внутри LIE (которые содержат всю информацию об определенном сайте) он полностью затухал, а затем собирал информацию об этом сайте из нашей базы данных.

Я думаю, что для этого требуется AJAX, но у меня нет особого опыта в этом. Я также не совсем понимаю, как использовать jQuery для написания нового HTML-кода после получения информации.

Answer 1

Не уверен на 100%, что вы хотите, но попробуйте что-то вроде этого:

$("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();
    });
});