多個項目的jQuery動畫

Question

在頁面上我有多個大拇指圖片，每個圖片都有自己的id，由php生成。

我需要爲每個元素做jQuery動畫。

我卡在這裏，我怎麼可以檢測到女巫thumb_id-??用戶是懸停，並動畫呢？

我知道我可以爲onmouseover/out做兩個簡單的js函數，並通過id ..但是還有另一種使用jQuery的方法嗎？

<script> 
$(document).ready(function(){ 
    $('#thumb_id- ??? ').mouseover(function(){ 
       div = $('div.thumb-img-hover'); 
       div.animate({opacity: '1'}, 150); 
    }).mouseout(function(){ 
       div.animate({opacity: '0'}, 150); 
    }); 
}); 
</script> 

---

foreach($arr as $val){ 
    echo ' 
    <a class="group1" text="TESTING" title="" href="'.$baseurl.'uploads/'.$val["filename"].'"> 
    <div class="thumb-img-container right"> 
    <div class="thumb-img" style="position:relative;background:url(\''.$baseurl.'uploads/thumbs/'.$val["filename"].'\') no-repeat center center;background-size: cover;"> 
    <div id="thumb_id-'.$val["id"].'" class="thumb-img-hover"><a href="'.$baseurl.'index.php?action=image&id='.$val["id"].'">test</a></div> 
    </div> 
    </div> 
    </a> 
    '; 
} 

Answer 1

您可以使用屬性與選擇，$('div[id^=thumb_id]')開始，但爲什麼不使用類選擇？

$(document).ready(function(){ 
    $('div.thumb-img-hover').mouseenter(function(){ 
     $(this).stop().animate({opacity: '1'}, 150); // this refers to the current element 
    }).mouseleave(function(){ 
     $(this).stop().animate({opacity: '0'}, 150); 
    }); 
}); 

您還可以使用CSS：

div.thumb-img-hover { 
    opacity: 0.5; 
    -webkit-transition: opacity 150ms; 
    -moz-transition: opacity 150ms; 
    -o-transition: opacity 150ms; 
    transition: opacity 150ms; 
} 
div.thumb-img-hover:hover { 
    opacity: 1; 
}