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

Question

我有一個充滿信息的div，在this blog，我用CSS設置了一個不透明度。我如何讓它「淡入」使用jQuery 90或100％懸停該div？

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