jquery - 防止父元素上的 CSS 动画应用于子元素

Question

假设我有一个 div 元素，代表轮播中的一张幻灯片。此 div 具有如下结构的标题、内容和页脚。

<div class='slide one'>
  <h1>Title</h1>
  <p>Content</p>
  <div>Footer</div>
</div>

如果我想将 CSS 动画应用到整个 .slide 类——例如，让它从左边移入——有没有办法阻止标题继承该动画类只是保持静止？

明确地说，我希望通过使用 jQuery 应用 animate.css 类来换出所有内容。 slide two 上的标题将与 slide one 上的标题完全相同。我只想知道是否有可能将动画应用于 slide 类排除某些子元素，以便它们显示为静态，而它们下面的内容会交换。

是的，我知道重组代码并将标题放在幻灯片外也能达到同样的效果，但在这种情况下不可行。

Answer 1

您可以告诉 jquery 选择器在应用 animate 函数时不要包含子元素，而只是使用 :not 运算符。以下内容只会更改 p 和 div 的不透明度，但不会更改 h1。

<div class='slide one'>
  <h1>Title</h1>
  <p>Content</p>
  <div>Footer</div>
</div>

  <script>
$().ready(function(){
      $('.slide').find(":not('h1')").animate({
         opacity : 0.1
        },1000); });
</script>

示例:http://jsfiddle.net/mnq7yqch/

编辑:

您还可以使用 .complete 函数，它可以让您改变所选元素的属性。

 $('.slide').find(":not('h1')").animate({
   marginLeft: '+=138px'
}, {
duration: 3000,
complete: function() {
  $(this).addClass("slide1");
}
  });

示例:http://jsfiddle.net/mnq7yqch/2/