淡入/淡出CSS3

Question

可能重複：
thumbnails fade in fade out

我珍玩是否有可能實現this效果（只有在淡入/淡出）

與css3。 我有一個類似的縮略圖卷軸，我想創建沒有javascript的效果，或者如果這是不可能的，你可以幫我一個簡單的解決方案，用jQuery創建這個？ 謝謝！

Answer 1

是的，這是可能的CSS3轉換。

下面是一個例子：http://jsfiddle.net/fgasU/

代碼：

<img src="photo.jpg"/>​ 

img{-webkit-transition: opacity 1s ease-in-out; 
-moz-transition: opacity 1s ease-in-out; 
-o-transition: opacity 1s ease-in-out; 
-ms-transition: opacity 1s ease-in-out; 
transition: opacity 1s ease-in-out; 
} 


img:hover{opacity:0}​ 

這個簡單的例子將改變懸停透明度。由於爲'all'屬性定義了一個css轉換，並且它們被賦予了一個1秒轉換和一個易入出緩動函數，所以屬性更改是動態的。

另外，因爲它是一個新屬性，所以transition屬性必須在適用的瀏覽器實現之前。用於Chrome/safari的webkit，用於Firefox/mozilla的-moz，用於歌劇的-ms microsoft。

Answer 2

jQuery解決方案：將縮略圖放在觸發器div中，該觸發器div完全位於圖像上方。目標是淡入淡出元素。

對於CSS3解決方案，請參閱Vigrond的答案。

HTML

<div id="wrapper"> 
    <img src="http://lorempixum.com/600/600" /> 
    <div id="trigger"> 
     <div id="thumbnails"> 
      <img src="http://lorempixum.com/60/60" /> 
      <img src="http://lorempixum.com/60/60" /> 
      <img src="http://lorempixum.com/60/60" /> 
      <img src="http://lorempixum.com/60/60" /> 
     </div> 
    </div> 
</div> 

CSS

#wrapper { position:relative; } 

#trigger { 
    width:100%; 
    height:80px; 
    position:absolute; 
    left:0; 
    bottom:20px; } 

#thumbnails { 
    width:100%; 
    height:80px; 
    display:none; } 

#thumbnails img { 
    margin:10px; 
    float:left; } 

jQuery的

$(document).ready(function(){ 
    $("#trigger").hover(function() { 
     $(this).children("div").fadeTo(200, 1); 
    }, function(){ 
     $(this).children("div").fadeOut(200); 
    }); 
}); 

見我的小提琴： http://jsfiddle.net/TheNix/Cjmr6/