1

私のギャラリーでは、Div がループを介して生成されています。そこで、ペティキュラー（単一）Divにホバー効果を与えたいと思います。私のコードでは、div全体に表示される特定のdivエフェクトにカーソルを合わせると。

マイコード

.spanstyle{opacity:1;}  

while (loop){
<div class="waz">
<span class="spanstyle"></span>

</div>
}

$(".waz .spanstyle").each(function(i, val) {
    $(this).mouseenter(function() {
        $(this).stop().animate({ opacity: 1 }, 300);
    })
    $(this).mouseleave(function() {
        $(this).stop().animate({ opacity: .3 }, 100);
    })
});

詳細については、プロジェクトを確認できます: プロジェクト

4

4 に答える 4

1

これは、すべてのdivに同じIDを指定しているためです。それらに異なるIDを与えてみてください

var i=0;
while (loop){
<div id="'waz' + i"></div>
i++;
}

あなたの$("#waz .spanstyle").each( ...

となります

$("div[id='^waz'] .spanstyle").each(...
于 2012-10-12T06:54:53.450 に答える
1

同じIDを持つ複数の要素があります。私はこのようなものを提案します：

while (loop){
    <div onmouseover="a" onmouseout="b"></div>
}

function a(){
     $(this).find('.spanstyle').stop().animate({ opacity: 1 }, 300);  
}

function b(){
     $(this).find('.spanstyle').stop().animate({ opacity: .3 }, 100);
}

編集：

または、コードに小さな変更を加えることができます。

$(".waz").each(function(i, val) {
    $(this).mouseenter(function() {
        $(this).children('.spanstyle').stop().animate({ opacity: 1 }, 300);
    })
    $(this).mouseleave(function() {
        $(this).children('.spanstyle').stop().animate({ opacity: .3 }, 100);
    })
});
于 2012-10-12T06:55:44.047 に答える