가장 가까운 div에 애니메이션하기

Question

이미지와 div가 있습니다. 이미지 위에 마우스를 가져 가면 div가 표시됩니다. 다른 이미지와 div에 동일한 효과를 사용하고 싶습니다. 하지만 이미지를 움직이면 div가 모두 표시됩니다. 개별적으로 애니메이션을 적용하려면 어떻게해야합니까? 여기에 당신이 어떤 HTML 구조를 제공하지 않았으므로 나는

$(".home_plus_1 img").hover(function() { 
    $(".hp_1_cont").animate({ 
     opacity: "1" 
    }, { 
     queue: false 
    }); 
}, function() { 
    $(".hp_1_cont").animate({ 
     opacity: "0" 
    }, { 
     queue: false 
    }); 
}); 




<div class="home_plus_1 plus_holder"> 
<img src="<?php echo get_template_directory_uri(); ?>/images/plus.png" alt=""> 
    <div class="hp_1_cont"> 
    <div class="hp1_t">Jeden Montag, 
     Mittwoch, Samstag & 
     Sonntag FKK Tage Bei uns im Club</div> 
    <div class="hp_1_conb">An allen anderen Tagen treffen Sie in unseren Clubräumlichekeiten die heißen Girls in sexy Dessous an!</div> 
    </div> 

    <!-- hp_1_cont --> 
</div> 

Answer 1

을 사용하고있는 코드가,이 같은 뭔가 도움이 말하고 싶지만 :

$(".home_plus_1 img").hover(function() { 
    $(this).next().animate({opacity: "1"}, {queue: false}); 
}, function() { 
    $(this).next().animate({opacity: "0"}, {queue: false}); 
}); 

편집 :에 맞게 코드를 업데이트 업데이트 된 HTML.

Answer 2

$(this).next() 또는 $(this).parent().find('.hp_1_cont') 컨텍스트가있는 요소에 도달 할 수 있습니다. 모든 문서의 요소를 검색하지 마십시오.

$(".home_plus_1 img").hover(function() { 
    $(this).next().stop().fadeIn(); 
}, function() { 
    $(this).next().stop().fadeOut(); 
});