如何淡入具有设置不透明度的div？

Question

我在this blog处有一个填充了信息的div，并且我使用CSS设置了一定的不透明度。如果在该div上悬停时使用jQuery将其“淡入”90％或100％？

.infoHolder2 {
position:absolute;
color:#FFF;
background:#9f9377;
padding:15px;
padding-top:23px;
z-index:5;
width:97.7%;
bottom:8px;
margin:-8px;
opacity:0.2;filter:alpha(opacity=20)
}

<div class="infoHolder2"><div id="title">I'm {Title} and I like <span id="stuff"></span>.  
</div><img id="portrait" src="{PortraitURL-128}"><img id="portraitCover"   
src="http://static.tumblr.com/ux4v5bf/3Uolhxkyl/cover.png">
<div id="infoHolder">{Description}</div></div>

Answer 1

尝试jquery fadeto()。

这应该可以解决问题（在500毫秒内淡出90％）：

$(".infoHolder2").fadeTo(500, 0.9);

Answer 2

您可以使用fadeTo()。

要淡入90％不透明度，请使用此...

$('.infoHolder2').hover(function() {
    $(this).fadeTo(1000, 0.9);
}, function() {
    $(this).fadeTo(1000, 0);
});

jsFiddle

Answer 3

使用jQueries fadeTo

<强>用法 http://api.jquery.com/fadeTo/

fadeTo(duration, opacity)

示例

//90% Opacity
$('.infoHolder2').fadeTo("slow", 0.90);

//100% Opacity
$('.infoHolder2').fadeTo("slow", 1);

悬停

$('.infoHolder2').hover(
        function(){
            $(this).fadeTo('slow', 0.90);
        },function(){
            $(this).fadeTo('slow', 0.50);
        } 
);

Live Demo

Answer 4

我认为以下内容应该有效：

$('.infoHolder2').fadeTo(500,'1');

值得注意fade()方法中参数的顺序，持续时间是第一个，后跟所需opacity的值。由于某些原因，我总是在写下来时让他们混淆。感谢@alex的评论。

如果您愿意，也可以使用：

$('.infoHolder2').animate({'opacity':'1'},500);

但是，除非你为其他属性设置动画，否则对于同样的效果会变得不那么简洁。

JS Fiddle demo to cover both options

参考文献：

• fadeTo()，
• animate()。

<小时/> 已修改以响应OP在hover()上运行此操作的要求

$('ul li').hover(
    function(){
        var which = $(this).index();
        if (which == 0){
            $(this).fadeTo(500,'1');
        }
        else {
            $(this).animate({'opacity':'1'},500);
        }
    },
    function(){
        $(this).fadeTo(500, 0.5);
    }
);

JS Fiddle demo

Answer 5

也可以通过CSS3而不使用jquery

.image {

    position: relative;
        overflow: hidden;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
        opacity:1;
filter:alpha(opacity=100);

}
.image:hover {

        opacity:0;
filter:alpha(opacity=0);
    }