0

私は現在、画像のmouseenterで不透明度を1にアニメートし、mouseleaveで再び0に戻すコードを使用しています。1 つの画像を表示する代わりに、ホバー時にすべてを表示します。

(this)の代わりに使用してみました(.project-hover img)が、その特定の div にのみ影響しますが、関数が開始される(.project-hover img)代わりにターゲットにする必要があります。.span4

これを達成するにはどうすればよいですか？

$(document).ready(function() {
    $(".span4").on("mouseenter", function() {
        $('.project-hover img').stop();//halts previous animation if it's running
        $('.project-hover img').animate({
            opacity: 1
        });
    }).on("mouseleave", function() {
        $('.project-hover img').stop();
        $('.project-hover img').animate({
            opacity: 0
        });
    });
});

HTML

<div class="span4">
    <div class="wrap-title">
        <div class="position">
            <div class="title"><a href="<?php echo get_permalink(); ?>"><?php the_title();?></a></div>
            <div class="tags"><?php echo $cats; ?> </div>
        </div>
    </div>  
    <div class="project-hover"><img src="<?php echo catch_that_image(); ?>">    </div>
</div>
4

4 に答える 4

3

find()ドキュメントを参照してください ... http://api.jquery.com/find/

$(document).ready(function() {
    $(".span4").on("mouseenter", function() {
        $(this).find('.project-hover img').stop();//halts previous animation if it's running
        $(this).find('.project-hover img').animate({
            opacity: 1
        });
    }).on("mouseleave", function() {
        $(this).find('.project-hover img').stop();
        $(this).find('.project-hover img').animate({
           opacity: 0
        });
    });
});

アップデート：

また、効率のためにメソッドを連鎖させる必要があり、おそらくメソッドに渡したいと思うでしょtrue, trueう.stop()。（待ち行列を防ぐため）

 $(document).ready(function() {
        $(".span4").on("mouseenter", function() {
            $(this).find('.project-hover img').stop(true, true).animate({
                opacity: 1
            });
        }).on("mouseleave", function() {
            $(this).find('.project-hover img').stop(true, true).animate({
               opacity: 0
            });
        });
    });
于 2013-04-22T10:52:58.953 に答える
0 
$(".span4").on("mouseenter", function() {
        $('.project-hover img', $(this)).stop();//halts previous animation if it's running
        $('.project-hover img', $(this)).animate({
            opacity: 1
        });
    }).on("mouseleave", function() {
        $('.project-hover img', $(this)).stop();
        $('.project-hover img', $(this)).animate({
           opacity: 0
        });
    });
于 2013-04-22T10:52:48.633 に答える
0

thisユーザーがホバリングしている現在の.span4要素を参照するため、その中のターゲット要素を見つけるだけです。

$(this).find('.project-hover img').animate(...);

ドキュメントから：

jQuery がハンドラーを呼び出すとき、thisキーワードはイベントが配信される要素への参照です。直接バインドされたイベントの場合、これはイベントが添付された要素であり、委任されたイベントの場合はthis一致する要素selectorです。(これはevent.target、イベントが子孫要素からバブルした場合とは異なる場合があることに注意してください。)要素から jQuery オブジェクトを作成して、jQuery メソッドで使用できるようにするには、 を使用します$(this)。

DOM トラバーサル メソッドのリスト: http://api.jquery.com/category/traversing/tree-traversal/

于 2013-04-22T10:53:00.273 に答える