2010-01-10 100 views
0

我建立基於以下標記一個簡單的圖片庫: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」,而它的位置會發生變化,然後將其淡入以顯示新圖像。

有人可以建議最有效的方法來做到這一點? - 任何幫助深表感謝!

+0

jQuery的fadeOut()和fadeIn()不適合你? – 2010-01-10 12:25:18

+0

是的,我更不確定如何讓他們獲得理想的效果。我猜我需要在fadeOut回調函數中的大部分代碼? – Fred 2010-01-10 12:41:57

+0

此代碼是最佳解決方案嗎?: $('#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

回答

1

從你的img標籤中刪除高度和寬度,css可以照顧到這一點。

CSS

#圖像列表{

 position:relative; 
     height:500px; 
     width:500px; 

}

#圖像列表IMG {

 height:500px; 
     width:500px; 

}

#圖像列表裏{

 position:absolute; 
     top:0; 
     right:0; 

}

JS

$( '#拇指列表裏IMG')。點擊(函數(){

 var image = $(this).parent().attr('id').substring(6); 
     $('#image-' + image).fadeIn("slow").siblings().fadeOut("slow"); 

});

你使用的是原型還是jQuery?

如果您使用jquery,而不是依靠.css()函數嘗試.hide()函數,因爲它的功能與css({'display' : 'none'})完全相同。和.fadeIn()將動畫你的div的回報。在第一次加載時,它們全都可見,所以不要用css來告訴jquery用這個命令隱藏它們。

$('#thumb-list il')。hide();

+0

我建議不要在您的html中刪除寬度和高度:通過設置這些,即使在加載圖像之前,您的html也能正確呈現。 – 2010-01-10 13:17:16

+0

嗯,我總是被告知保留我的HTML標籤的樣式標記,但... – 2010-01-10 13:57:41

+0

感謝羅伯特, 重疊列表項目絕對看起來像一個更好的解決方案...大概這種方法,我需要添加「顯示:沒有;」然後顯示第一項使用類似: $('#image-list ul li:first-child')。css({'display':'block'}); (對不支持「first-child」的瀏覽器使用javascript)。 – Fred 2010-01-10 18:04:32

1

另一種解決方案可能是使用插件,然後修改您的樣式,以便在某人禁用Javascript時不會破壞您的頁面。

退房:http://medienfreunde.com/lab/innerfade/

這是很容易使用,而難以弄亂。祝你好運! :)