淡入/淡出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/