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

我希望你们学到新东西。感谢所有帮助过的人。

如何使用jQuery为一个孩子而不是其他孩子制作动画？

1 个答案: