多个项目上的 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;
}