不添加特殊类 jQuery 启动 css 动画答案

【问题标题】：Start css animation without adding special class jQuery不添加特殊类 jQuery 启动 css 动画
【发布时间】：2017-06-06 14:59:49
【问题描述】：

我正在尝试改进在 jQuery 上运行的图像/div 滑块。每张幻灯片都是一个 DIV，可以在其中添加任何其他标签（文本、图像..）。并且它是具有特定动画的特定类（因此使用 jQuery 添加另一个用于动画的类似乎有点困难，而且我至少有 2 个使用相同 jQuery 的不同滑块 .. 现在有什么要对 css 说的吗（仅适用于里面的元素DIV))。

当我为每张幻灯片上的事件设置动画时（文本来自上方等），它们都从页面加载开始 - 从逻辑上讲 - 而不是当前位于前面的 DIV。但是使用我当前的代码，我无法通过向 IMG、SPAN 等添加另一个类来应用 CSS 动画，因为我对每个类都有特定的动画，但是 jQuery 无法识别类并且只是将 DIV 移动到左/右。

如何让 jQuery（css 可能不是）仅在当前显示的 DIV 上启动此动画？我还想让 CSS 为它制作动画，而不是 jQuery (.animate())，因为我已经为它准备了 CSS 中的长动画。

jQuery:

自动滑动：

jQuery(document).ready(function ($) {

  $('#slider .some').ready(function(){
    setInterval(function () {
        moveRight();
    }, 60000);
  });

向右移动功能

function moveRight() {
        $('#slider .some').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider .some div.slid:first-child').appendTo('#slider .some');
            $('#slider .some').css('left', '');
        });
    };

CSS: /*删除了所有不必要的东西*/

.slid {
   /*width, height, overflow ... */
  }

img { -webkit-animation: frameFirst 2s ease-out;
      -moz-animation: frameFirst 2s ease-out;
      -o-animation: frameFirst 2s ease-out;
      animation: frameFirst 2s ease-out;
    }

span { -webkit-animation: frameSecond 2s ease-out;
      -moz-animation: frameSecond 2s ease-out;
      -o-animation: frameSecond 2s ease-out;
      animation: frameSecond 2s ease-out;
    }

    /* and  @keyframes for those animations */

HTML：

<div id="slider">
  <div class="some">
     <div class="slid">
         <span></span><!--TEXT STUFF, HAS ITS OWN ANIMATION-->
         <img /><!--IMAGE STUFF, HAS ITS OWN ANIMATION-->                                
      </div>
      <div class="slid">
         <!-- ANOTHER STUFF WITH ANOTHER ANIMATIONS -->                               
      </div>
  </div>
</div>

【问题讨论】：

您可以使用.filter() 选择特定元素。
是的，我可以为大量不同的类编写它，正如我所写的，有什么东西可以在当前 DIV 中启动所有 CSS（每张幻灯片都有相同的类）吗？
$(".className") 会选择所有带有className的元素
听起来你想在特定元素可见时开始动画。就像用户必须向下滚动页面一样，动画应该在该元素对用户可见时开始。为此，您需要从事件回调中触发动画。也许当.scrollTop() 传递了一个特定的值。
我认为我们都在谈论不同的东西，我需要为每个 '
' 内的每个类都这样做，无论类名如何，所以更合适的是像 $(".slide .[some quantifier]") 之类的东西，然后为这些类启动所有 css，但是我不知道该怎么做，没有指定每个类[编辑：不仅前面的 DIV 是可见的，还有一点他的左右邻居]

标签： jquery html css animation slider

【解决方案1】：

根据您的 cmets，您可以使用 .children() 和 .each() 来识别没有太多共同点的元素。

例如，您可以使用：

$('.slid').children().addClass("go");

这会将“go”类添加到“slid”类的所有子元素中。然后，您可以使用 .each() 来迭代每个项目。

$(".go").each(function(){
  $(this).animate();
});

在此，$(this) 代表单个元素。如果需要你也可以这样做：

$(".go").each(function(i, el){
  $(el).animate();
});

i 是元素的索引 (0, 1, 2, n...)，el 是元素本身。

【讨论】：