CSS 使用 css3 淡入/淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9250619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
fade in/out with css3
提问by Cojocaru Daniel
Possible Duplicate:
thumbnails fade in fade out
可能的重复：
缩略图淡入淡出
I'm curios if it's possible to achieve thiseffect ( only the fade in/out )
如果有可能实现这种效果，我很好奇（只有淡入/淡出）
with css3. I have a similar thumbnails scroller and I want to create that effect without javascript, or if this is not possible could you help me with a simple solution for creating this with jquery ? Thanks!
用css3。我有一个类似的缩略图滚动条，我想在没有 javascript 的情况下创建这种效果，或者如果这是不可能的，你能帮我一个简单的解决方案来用 jquery 创建这个吗？谢谢！
回答by Vigrond
Yes this is possible with CSS3 transitions.
是的，这可以通过 CSS3 过渡实现。
Here's an example: http://jsfiddle.net/fgasU/
这是一个例子：http: //jsfiddle.net/fgasU/
code:
代码：
<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}?
This simple example will change the opacity on hover. Because a css transition is defined for 'all' properties, and they are given a 1 second transition with an ease-in-out easing function, the property change is animated.
这个简单的例子将改变悬停时的不透明度。因为 css 过渡是为“所有”属性定义的，并且它们被赋予 1 秒的过渡和缓入缓出功能，所以属性更改是动画的。
Also, because it is a new property, the transition property must be preceded by the applicable brower's implementation. -webkit for chrome/safari, -moz for firefox/mozilla, -o opera, -ms microsoft.
此外，由于它是一个新属性，因此过渡属性必须在适用的浏览器实现之前。-webkit 用于 chrome/safari，-moz 用于 firefox/mozilla，-o 歌剧，-ms 微软。
回答by Nix
The jQuery solution: Wrap the thumbnails in a trigger div, which is absolutely positioned over the image. Target that to fade the elements in and out.
jQuery 解决方案：将缩略图包裹在触发器 div 中，该 div 绝对位于图像上方。以淡入淡出为目标。
For a CSS3 solution, refer to Vigrond's answer.
有关 CSS3 解决方案，请参阅 Vigrond 的回答。
HTML
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
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
jQuery
$(document).ready(function(){
$("#trigger").hover(function () {
$(this).children("div").fadeTo(200, 1);
}, function(){
$(this).children("div").fadeOut(200);
});
});
See my fiddle: http://jsfiddle.net/TheNix/Cjmr6/
看我的小提琴：http: //jsfiddle.net/TheNix/Cjmr6/
