2

在页面上我有多个拇指图像，每个都有它自己的 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>
    ';
}
4

1 回答 1

3

您可以使用以选择器开头的属性$('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;
}
于 2013-01-18T12:57:59.513 回答