Как оживить одного ребенка, но не других, используя 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 при каждом щелчке. Можно ли как-то анимировать только тот элемент, на который я нажал, совсем не мешая другим?

Я пытался играть с: not (: animated) и другими вещами, но это только ухудшало ситуацию. Буду признателен за любую помощь или предложения.

Заранее спасибо!

Answer 1

Привет всем, после некоторого исследования, я понял это. С самого начала я знал, что причина в том, что другие объекты были анимированными, потому что классы были общими для всех. Чтобы избежать этого, нужно настроить таргетинг только на дочерний элемент элемента, который мы щелкнули, используя селектор jQuery $(this).children(). Вы можете увидеть функциональную демоверсию здесь . Мой код выглядит так:

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

Надеюсь, вы, ребята, узнали что-то новое. Спасибо всем, кто помог.