2011-07-12 50 views
0

我的初始問題:我有一張桌面,其中包含關於屏幕上半部分客戶端的基本信息。我想在屏幕的下半部分放置一個div,在上半部分的表格上單擊名稱時將顯示有關客戶端的詳細信息。jquery的新功能:需要幫助將淡入/淡出腳本放在一起

我在計算器

發現了一堆的問題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> 

這似乎是一個很容易的事。我只是不知道如何設置客戶端詳細信息和鏈接,因此它在當前(點擊)客戶端的信息中淡入淡出前一個。

回答

1

其他答案提供了堅實的指導,雖然它只是簡單地做一個鏈接fadeOut.fadeIn,如果你希望他們淡入淡出同時更好的效果沒有任何延遲和沒有首先等待一個淡出,另一個淡入,你可以做我在這個小提琴上做的事情:

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

+0

這就是我所需要的。不僅是代碼,還有一個地方可以玩弄它並理解它是如何工作的。謝謝。 – mikepreble

+0

很高興幫助。如果你有大量的用戶,你可能會考慮使用Ajax調用 - 查閱jQuery的GET並查看一些示例,這些都很簡單,並且使你的服務器和服務器的生活更加簡單。 – Swader

+0

在腳本的頂部,我將當前的一組客戶端加載到一個數組中(客戶端根據誰登錄進行加載),所以我只做了1分貝的呼叫。但是如果我想讓人們能夠查看每個人(600多個客戶),我可能會考慮這一點。感謝您的建議。 – mikepreble

0

你有沒有嘗試過任何jQuery?

的你想要做的會是這個樣子什麼基礎:

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

雖然我得到這個概念,我怎樣才能讓[新標記]部分顯示正確的信息200+的客戶呢?我是否爲每個客戶設置了一個div,其詳細信息和div的顯示設置爲none?我如何獲得鏈接以指定客戶的詳細信息? – mikepreble

+0

@mikepreble使用ajax調用來做到這一點。閱讀jQuery的GET文檔 - 這可以讓您根據需要檢索信息的片段。大量的請求總是比一個巨大的內存佔用顯示更好:沒有密集的顯示。 – Swader

+0

什麼是「客戶」? – Kon

0

首先,你需要IDS或類添加到您的鏈接。 IE:

<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); 
}); 

如果您需要加載客戶端信息,對阿賈克斯一看($。員額(),$ .load())