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

Question

我在 此博客 上有一个充满信息的 div，并使用 CSS 将其设置为一定的不透明度。我如何使用 jQuery 让它在悬停在该 div 上时“淡入”到 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

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

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

值得注意的是 fade() 方法中参数的顺序，持续时间是第一个，然后是所需的 opacity 的值。由于某种原因，我在写下它们时总是把它们搞混了。感谢@alex 的评论。

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

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

但是，除非您要为其他属性设置动画，否则对于相同的效果，它会变得不太简洁。

涵盖这两个选项的 JS Fiddle 演示。

参考文献：

• fadeTo()、
• animate()。

---

Edited in response to OP's requirements to run this on 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 演示。

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

现场演示

Answer 4

您可以使用 fadeTo()。

要淡出至 90% 不透明度，请使用此...

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

jsFiddle。

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