jquery - 如何使用 jQuery 为一个 child 设置动画而不是其他 child ？

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() 仅定位我们单击的元素的子元素。可以看功能演示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 );
        }
      );
    });

我希望你们学到了一些新东西。感谢所有提供帮助的人。