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

嘿伙计们，我已经使用jQuery（第一个真正的jQuery项目）从头开始编写这个代码，到目前为止，我有一些切换动画。 我的代码如下所示：

HTML

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()来定位我们单击的元素的子元素。 你可以在这里看到function演示。 我的代码如下所示：

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

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