如何使用jQuery为一个孩子而不是其他孩子做动画? [英] How to animate one child but not others using jQuery?

问题描述

大家好，我是使用jQuery(第一个真正的jQuery项目)从头开始编写此代码的，到目前为止，我有一些切换动画.我的代码如下:

Hey guys, I have written this code from the ground up using jQuery (first real jQuery project), and so far, I have some toggle animation. My code looks like this:

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的每个元素.我有什么办法只能为单击的元素设置动画，而根本不打扰其他元素?

This works fine with one element, BUT it applies the same animation to every element assigned .featured-img on each click. Is there any way I can only animate the element I clicked, without disturbing the other ones at all?

我曾尝试过:not(:animated)和其他东西，但这只会使情况变得更糟.我将不胜感激.

I have tried playing with :not(:animated), and other stuff, but it only made it worse. I would appreciate any help or suggestions.

提前谢谢！

推荐答案

大家好，经过更多研究后，我发现了.我从一开始就知道其他对象具有动画性的原因，因为这些类在整个过程中都是共享的.避免这种情况的方法是仅针对使用jQuery子选择器$(this).children()单击的元素的子项.您可以在此处上看到功能演示.我的代码如下:

Hey everyone, after doing some more research, I figured it out. I knew from the beginning that the reason the other objects were animated because the classes were shared throughout. The way to avoid that is to target only the child of the element we clicked using the jQuery child selector $(this).children(). You can see the functional demo here. My code looks like this:

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

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

I hope you guys have learned something new. Thanks for all those who helped.

这篇关于如何使用jQuery为一个孩子而不是其他孩子做动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！