Question

我最初的问题：我在屏幕的上半部分有一个表格，其中包含有关客户的基本信息。我想在屏幕的下半部分放置一个div，它将在上半部分的表格中点击名称时显示有关客户端的详细信息。

我在stackoverflow

中找到了一堆关于问题的jquery结尾的很好的例子

此处：Fade out a div with content A, and Fade In the same div with content B
在这里：How to fade out div slowly, update content, and then fade in div slowly, using jQuery?

但我的问题是如何让它为我工作，我知道这只是因为我不明白jquery是如何工作的。

这与我的网站现在的情况很接近：

<table>
<tr>
<td>ID</td>
<td>Name</td>
<td>Account Number</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">Joe Smith</a></td>
<td>3838.3234</td>
</tr>
<tr>
<td>2</td>
<td><a href="#">Jane Doe</a></td>
<td>915.70</td>
</tr>
...
</table>
<div id="client_details>
this is where I want the client details to go that will have more information than the table up above
</div>

这似乎是一件非常容易的事情。我只是不知道如何设置客户端详细信息和链接，以便它在当前（点击）客户端的信息中淡出并淡出前一个。

Answer 1

其他答案提供了可靠的指导，虽然它就像简单地执行链式fadeOut.fadeIn一样简单，如果您希望它们同时淡入淡出以获得更好的效果而没有任何延迟且没有首先等待一个淡出而另一个淡出，你可以做我在这个小提琴做的事情：

http://jsfiddle.net/gLaDq/22/

Answer 2

你有没有试过任何jQuery？

您想要做的事情的基础知识如下：

$('#elementId').fadeOut().html('[NEW MARKUP]').fadeIn();

Answer 3

首先，您需要在链接中添加ID或类。即：

<a href="#" id="jane_doe" class="client">Jane Doe</a>

然后，使用jQuery：

   $('.client').click(function(){
//When you click on a link which has the 'client' class...

$('#client_details').fadeOut(100).html('the client details information').fadeIn(100);
});

如果您需要加载客户端信息，请查看Ajax（$ .post（），$。load（））

jquery的新手：需要帮助将淡入/淡出脚本放在一起

3 个答案: