jQuery从数据库淡出和淡入信息

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.

所以想象一个网格，每行2个站点。

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.

我想使用jQuery，这样当我点击H3，图像或LIE内的段落（这些都是关于某个站点的信息）时，它会淡出整个UL，然后从我们的数据库中获取有关该站点的信息。

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.

我认为这需要AJAX，但我没有太多经验。我也很困惑如何在获取信息后使用jQuery编写新的HTML。

1 个解决方案

#1

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

不是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();
    });
});