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

假设我有一个

div

元素，它表示旋转木马中的一张幻灯片。此

div

具有如下结构的标题、内容和页脚

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

标题
内容

页脚

如果我想将CSS动画应用于整个

.slide

类，例如，让它从左侧移入，有没有办法防止标题继承该动画类而只是保持静态

为了清楚起见，我希望通过使用jQuery应用animate.css类来交换所有内容。幻灯片二上的标题与幻灯片一上的标题完全相同。我只是想知道是否有可能将动画应用到

幻灯片

类中，排除某些子元素，使它们在下面的内容交换时显示为静态

---

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

您可以告诉

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>

---

示例：

滑块元素本身的CSS无关紧要——它可以是任何东西。您可以随意添加或删除类，也可以随意设置它们的样式，因为滑块是通过jQuery实现的。动画的CSS使用animate.CSS:“fadeInLeft animated”类。不，这是不可能的–就像你将硬币放入鞋盒，然后移动鞋盒一样…你很难期望硬币停留在原来的位置（相对于外部）。因此，你可以将硬币放在鞋盒外，或者你必须对硬币进行动画处理，以执行鞋盒运动的“反转”。我也这么认为，但我想也许有人知道z索引技巧或使用方法！重要信息：这可能会否决动画效果。我猜是一厢情愿。对于一些动画，比如从左开始的幻灯片，你可以设置“标题”从与幻灯片开始相关的“即将结束”位置开始制作动画，然后将其制作到原始位置。这样看来它好像不动了。@LGSon你能再详细说明一下吗？这似乎很有希望，我想我也在跟进，但我需要为它编写自己的动画课程，对吗？这是一个非常好的答案，如果没有其他人提出更好的解决方案，我相信你，但我认为这在我的情况下是行不通的。我正在通过jQuery的.addClass（）应用animate.css类来实现动画。我已经用另一个解决方案更新了该解决方案，它将帮助您处理类。

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