2

ページには複数の親指画像があり、それぞれにphpによって生成された独自のIDがあります。

要素ごとに jQuery アニメーションを実行する必要があります。

ここで立ち往生していthumb_id-??ます。ユーザーがホバリングしている魔女を検出してアニメーション化するにはどうすればよいですか?

onmouseover/out に対して 2 つの単純な 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 に答える