Question

可能重复：
thumbnails fade in fade out

我很好奇是否有可能实现this效果（只有淡入/淡出）

使用css3。我有一个类似的缩略图滚动条，我想在没有javascript的情况下创建该效果，或者如果这是不可能的，你能帮助我用jquery创建这个简单的解决方案吗？谢谢！

Answer 1

是的，这可以通过CSS3过渡。

代码：

<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}

这个简单的例子将改变悬停时的不透明度。因为为“所有”属性定义了css转换，并且它们具有1秒的转换以及易于进行的缓动功能，所以属性更改是动画的。

此外，因为它是一个新属性，所以过渡属性必须以适用的浏览器实现开头。 -webkit for chrome / safari，-moz for firefox / mozilla，-o opera，-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/

使用css3淡入/淡出

2 个答案: