jQuery淡入div用于重复类

Question

我正在尝试做一些与此问题中解释的内容非常相似的事情 - jQuery hover : fading in a hidden div while fading out the "default" one

我遇到的问题是我想在重复类上使用淡入/淡出，而不是这个使用单个 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) 但无法让它工作。非常感谢任何帮助！

Answer 1

使用$(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);
        });
    });
});