jQuery的：懸停

Question

透明覆蓋層基本上我有4張圖片設置了這樣的div：

<div id="selector"> 
    <div id="1"><div class="folio_container pk"><div class="overlay"></div></div></div> 
    <div id="2"><div class="folio_container ybn"><div class="overlay"></div></div></div> 
    <div id="3"><div class="folio_container u"><div class="overlay"></div></div></div> 
    <div id="4"><div class="folio_container more"><div class="overlay"></div></div></div> 
    <div class="clearfloat"></div> 
    </div> 

而CSS：

.folio_container{margin:10px 80px 10px 15px; float:left; position:relative; cursor:pointer; -moz-border-radius: 8px; -webkit-border-radius: 8px; background-position:top left; background-repeat:no-repeat; width:80px; height: 80px;} 
.pk{ background-image:url(../images/pk_icon.png) !important;} 
.ybn{ background-image:url(../images/ybn_icon.png) !important;} 
.u{ background-image:url(../images/u_icon.png) !important;} 
.more{ background-image:url(../images/more_icon.png); margin:10px 0px 10px 15px !important;} 

.overlay{ background-image:url(../images/overlay.png); background-position:top left; -moz-border-radius: 8px; -webkit-border-radius: 8px; background-repeat:no-repeat; width:80px; height:80px; position:absolute; top:0px; left:0px; display:none;} 

我怎樣才能讓我的Jquery，使其淡入每個單獨懸停的懸停的疊加，我一直對這個想法感到困惑，因爲看到div類是相同的，它不會同時觸發它們嗎？

繼承人的jQuery的迄今：

$('.overlay').css('display', 'block'); 
$('.overlay').css('opacity', 0.0); 
$('folio_container', this).hover(function() { 
    $(this).children('.overlay', this).stop().animate({opacity:1.0},500); 
}, 
function() { 
    $(this).children('.overlay', this).stop().animate({opacity:0.0},500); 
}); 

Answer 1

在幕後，jQuery的每個迭代通過您的選擇信息相匹配的div的和結合over和out函數到每個單獨元件。另外，我建議用可選參數clearQueue（當您在函數間切換時移除任何未決動畫）和gotoEnd（完成當前動畫）設置爲true時，調用stop - 這通常是行爲人們想要！ （例如，請參閱this question。）

Answer 2

我得到了答案，我從來沒有意識到：jQuery是足夠聰明的只分別與同一類應用操作到不同的元素觸發！完美：

繼承人jquery任一方式！

$('.overlay').css('display', 'block'); 
$('.overlay').css('opacity', 0.0); 
$('.folio_container').hover(function() { 
    $('.overlay', this).stop().animate({opacity:1.0},500); 
}, 
function() { 
    $('.overlay', this).stop().animate({opacity:0.0},500); 
});