我建立基於以下標記一個簡單的圖片庫:jQuery的畫廊淡入/淡出
<div id="image-list">
<ul>
<li id="image-1">
<img src="myimage1.jpg" width="500" height="500" alt="My Image" />
</li>
<li id="image-2">
<img src="myimage2.jpg" width="500" height="500" alt="My Image" />
</li>
<li id="image-3">
<img src="myimage3.jpg" width="500" height="500" alt="My Image" />
</li>
</ul>
</div>
<ul id="thumb-list">
<li id="thumb-1"><img src="myimage1-thumb.jpg" width="50" height="50" alt="My Image" /></li>
<li id="thumb-2"><img src="myimage2-thumb.jpg" width="50" height="50" alt="My Image" /></li>
<li id="thumb-3"><img src="myimage3-thumb.jpg" width="50" height="50" alt="My Image" /></li>
</ul>
我都稱呼這個使用CSS,這樣只有較大的圖像,一個在同一時間是可見的(使用溢出:用固定的容器高度隱藏)。
然後我使用jQuery的容器內的絕對定位UL,以顯示每個圖像,使用下面的標記:
$('#thumb-list li img').click(function() {
var image = $(this).parent().attr('id').substring(6);
var position = $('#image-' + image).position();
$("#image-list ul").css({'top' : '-' + position.top +'px'});
});
基本上我想淡出了整個「#圖像列表UL」,而它的位置會發生變化,然後將其淡入以顯示新圖像。
有人可以建議最有效的方法來做到這一點? - 任何幫助深表感謝!
jQuery的fadeOut()和fadeIn()不適合你? – 2010-01-10 12:25:18
是的,我更不確定如何讓他們獲得理想的效果。我猜我需要在fadeOut回調函數中的大部分代碼? – Fred 2010-01-10 12:41:57
此代碼是最佳解決方案嗎?: $('#thumb-list li img')。click(function(){ \t var image = $(this).parent()。attr('id') ('#image-list ul')。fadeOut('fast',function(){ \t \t $(本)的.css({ '頂': ' - ' + position.top + '像素'})淡入( '快'); \t}); \t \t \t \t \t }); – Fred 2010-01-10 12:50:58