1

私はこの質問で説明されていることと非常によく似た何かをしようとしています - jQuery hover : 「デフォルト」のものをフェードアウトしながら非表示のdivをフェードイン

私が抱えている問題は、単一の ID をセレクターとして使用するこの例ではなく、繰り返しクラスでフェードイン/フェードアウトを使用したいということです。私の画像にカーソルを合わせると、同じクラスを使用するページ上の他のすべての画像もフェードします。これが私が持っているものです：

HTML

<div class="test">
            <div class="img rounded">
                <div class="post_image"> <a href="#"><img src="http://graphics8.nytimes.com/images/2009/07/19/arts/Pool4.jpg" border="0"></a>
                </div>
            </div>
            <div class="post_body hide">
                <p>This is a dummy text to fadeThis is a dummy text to fadeThis is a dummy text to fadeThis is a dummy text to fadeThis is a dummy text to fade This is a dummy text
                </p>
            </div>
        </div>


            <div class="test">
            <div class="img rounded">
                <div class="post_image"> <a href="#"><img src="http://graphics8.nytimes.com/images/2009/07/19/arts/Pool4.jpg" border="0"></a>
                </div>
            </div>
            <div class="post_body hide">
                <p>This is a dummy text to fadeThis is a dummy text to fadeThis is a dummy text to fadeThis is a dummy text to fadeThis is a dummy text to fade This is a dummy text
                </p>
            </div>
        </div>

jQuery

<script type="text/javascript">
$(function(){
$('.test').hover(
        function(){
            $('.post_image').fadeOut(100, function(){
                $('.post_body').fadeIn(100);                         
            });
        },
        function(){
            $('.post_body').fadeOut(100, function(){
                $('.post_image').fadeIn(100);                        
            });
        }
        );


});
</script>

jQuery で $(this) が必要だと確信していますが、それを機能させることはできません。どんな助けでも大歓迎です！

4

1 に答える 1

0

$(this)オブジェクトと関数を使用すると、次のfind()ようにうまく機能するはずです。

$(function(){
    $('.test').hover(function(){
        $(this).find('.post_image').fadeOut(100,function(){
            $('.post_body').fadeIn(100);
        });
    },function(){
        $(this).find('.post_body').fadeOut(100,function(){
            $('.post_image').fadeIn(100);
        });
    });
});
于 2012-04-12T22:36:14.573 に答える