jQuery를 사용하여 하나의 자식을 애니메이트하는 방법

Question

안녕하세요, 저는이 코드를 처음부터 jQuery (첫 번째 실제 jQuery 프로젝트)를 사용하여 작성했으며, 지금까지 토글 애니메이션을 사용했습니다. 내 코드는 다음과 같습니다

HTML

<div id="content">  
    <div class="featured-img one"> 
     <img src="media/desktopography.png" alt="Desktopography"/> 
    </div><!-- end .featured-img --> 

    <div class="featured-img two"> 
     <img src="media/dancer.png" alt="Dancer"/> 
    </div><!-- end .featured-img --> 

    <div class="featured-img three"> 
     <img src="media/tech.png" alt="Tech"/> 
    </div><!-- end .featured-img --> 

    <div class="featured-img four"> 
     <img src="media/strawberry-tree.png" alt="Strawberry Tree"/> 
    </div><!-- end .featured-img --> 

    <div class="featured-img five"> 
     <img src="media/snow-leopard.png" alt="Snow Leopard"/> 
    </div><!-- end .featured-img --> 
</div><!-- end #content --> 

jQuery를

$(document).ready(function(){ 
    $('.featured-img').toggle(
    function() { 
    $(this).animate({ 
      height: "600px", 
      marginTop: "-100px" 
}, 500); 
     $(".featured-img > img").animate({ 
      marginTop: "0px" 
}, 500); 
    }, 
    function() { 
    $(this).animate({ 
      height: "150px", 
      marginTop: "100px" 
}, 1500); 
     $(".featured-img > img").animate({ 
      marginTop: "-200px" 
}, 1500); 
    } 
    ); 
}); 

이 하나 개의 요소가 잘 작동하지만 .featured- 할당 된 모든 요소에 동일한 애니메이션을 적용 클릭 할 때마다 img. 다른 요소를 전혀 방해하지 않고 클릭 한 요소 만 애니메이션으로 만들 수있는 방법이 있습니까?

나는 놀지 않으려 고 노력했다 : (애니메이션 :), 그리고 다른 것들,하지만 더 악화 시켰어. 나는 어떤 도움이나 제안을 주셔서 감사합니다.

미리 감사드립니다.

Answer 1

안녕하세요 여러분, 좀 더 연구를 한 후, 나는 그것을 알아 냈습니다. 처음부터 클래스가 공유 되었기 때문에 다른 객체가 애니메이션으로 된 이유를 알았습니다. 이를 피하는 방법은 jQuery 자식 선택기 $(this).children()을 사용하여 클릭 한 요소의 자식 만 대상으로 지정하는 것입니다. 기능 데모 here을 볼 수 있습니다. 내 코드는 다음과 같습니다.

$(document).ready(function(){ 
    $('.featured-img').toggle(
     function() { 
      $(this).animate({ 
       height: "593px", 
       marginTop: "-100px" 
     }, 500); 
      $(this).children().animate({ 
       marginTop: "0px" 
     }, 500); 
     }, 
     function() { 
      $(this).animate({ 
       height: "150px", 
       marginTop: "100px" 
     }, 1500); 
      $(this).children().animate({ 
       marginTop: "-200px" 
     }, 1500); 
     } 
    ); 
    }); 

여러분이 새로운 것을 배웠 으면합니다. 도와 주신 모든 분들께 감사드립니다.