使用css3淡入/淡出[重复]-fadein/outwithcss3[duplicate]

21  

Yes this is possible with CSS3 transitions.

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

Here's an example: http://jsfiddle.net/fgasU/

这是一个例子:http://jsfiddle.net/fgasU/

code:

​

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 for chrome / safari,-moz for firefox / mozilla,-o opera,-ms microsoft。

2  

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

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

See my fiddle: http://jsfiddle.net/TheNix/Cjmr6/

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