jQuery队列不起作用

Question

我想要完成的任务：

让队列中的多张牌在文档就绪后相互滑入，对于在页面加载时看不到的元素，我希望在滚动时对它们进行相同的操作。

问题：

所有元素同时滑入。 （即使我使用了每个循环）


示例：

＆＃13;

＆＃13;

$( document ).ready(function(){
    readyAnimation("slide-in-left");
    readyAnimation("slide-in-cards");
});

$(window).scroll(function() {
    readyAnimation("slide-in-left");
    readyAnimation("slide-in-cards");
});

function readyAnimation (animationClass) {

var resetAnimationClass = "reset-animations";

$("." + animationClass).each(function() {

    var elem = $(this);

    if(elem.hasClass(animationClass)) {

        if (isScrolledIntoView(elem) == true ) {
               elem.delay(500).queue(function(){
                elem.addClass(resetAnimationClass).dequeue();
           })
        } 
      }
    });
 }

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return (docViewBottom >= elemTop && docViewTop <= elemBottom);
}

＆＃13;

.card {
  float: left;
    width: 25%;
    background: $brand;
    height: 300px;
    border: 1px solid white;
    background: #333;
}

.slide-in-cards {
    transform: translate3d(0, 50px, 0);
    opacity: 0;
    transition: transform 600ms cubic-bezier(0.52, 1.61, 0.56, 1), opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

.reset-animations {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card slide-in-cards">
        <img />
   </div>
   <div class="card slide-in-cards">
        <img />
   </div>
   <div class="card slide-in-cards">
         <img />
   </div>
<div class="card slide-in-cards">
        <img />
   </div>
   <div class="card slide-in-cards">
        <img />
   </div>
   <div class="card slide-in-cards">
         <img />
   </div>
<div class="card slide-in-cards">
        <img />
   </div>
   <div class="card slide-in-cards">
        <img />
   </div>
   <div class="card slide-in-cards">
         <img />
   </div>
   ...

＆＃13;

＆＃13;

＆＃13;

到目前为止我做了什么：

我的标记看起来像这样：

   <div class="card slide-in-cards">
        <img />
   </div>
   <div class="card slide-in-cards">
        <img />
   </div>
   <div class="card slide-in-cards">
         <img />
   </div>
   ...

我希望他们通过使用类似的东西在彼此之后滑入：

function readyAnimation (animationClass) {

var resetAnimationClass = "reset-animations";

$("." + animationClass).each(function() {

    var elem = $(this);

    if(elem.hasClass(animationClass)) {

        if (isScrolledIntoView(elem) == true ) {
               elem.delay(500).queue(function(){
                elem.addClass(resetAnimationClass).dequeue();
           })
        } 
      }
    });
 }

我添加了一个将css重置为正常的类，这些元素具有转换属性

此功能就像这样调用

$( document ).ready(function(){
    readyAnimation("slide-in-left");
    readyAnimation("slide-in-cards");
});

$(window).scroll(function() {
    readyAnimation("slide-in-left");
    readyAnimation("slide-in-cards");
});

isScrolledIntoView函数来自stackoverflow，看起来像这样

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return (docViewBottom >= elemTop && docViewTop <= elemBottom);
}

Answer 1

一些想法：

1. 请记住，单独元素的动画在 parallel 中运行;每个元素都有自己的动画队列。

2. 您已经说过，当有更多元素出现时，您遇到了问题。这是因为你没有从选择要动画的元素中消除它们。

3. 您的***检查是不必要的，因为您只选择了具有该类别的元素。

所以（参见function readyAnimation(animationClass) { var resetAnimationClass = "reset-animations"; var counter = 0; // *** $("." + animationClass).not("." + resetAnimationClass).each(function() { // *** var elem = $(this); // *** No `if (elem.hasClass(animationClass))` here, we know it does if (isScrolledIntoView(elem) == true) { ++counter; // *** elem.delay(500 * counter).queue(function() { // *** elem.addClass(resetAnimationClass).dequeue(); }) } }); } 注释行）：

$(document).ready(function() {
  //readyAnimation("slide-in-left");
  readyAnimation("slide-in-cards");
});

$(window).scroll(function() {
  //readyAnimation("slide-in-left");
  readyAnimation("slide-in-cards");
});

function readyAnimation(animationClass) {

  var resetAnimationClass = "reset-animations";

  var counter = 0;
  $("." + animationClass).not("." + resetAnimationClass).each(function() {

    var elem = $(this);

    if (isScrolledIntoView(elem) == true) {
      ++counter;
      elem.delay(500 * counter).queue(function() {
        elem.addClass(resetAnimationClass).dequeue();
      })
    }
  });
}

function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return (docViewBottom >= elemTop && docViewTop <= elemBottom);
}

＆＃13;
＆＃13;
.card {
  float: left;
  width: 25%;
  background: $brand;
  height: 300px;
  border: 1px solid white;
  background: #333;
}
.slide-in-cards {
  transform: translate3d(0, 50px, 0);
  opacity: 0;
  transition: transform 600ms cubic-bezier(0.52, 1.61, 0.56, 1), opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.reset-animations {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card slide-in-cards">
  <img />
</div>
<div class="card slide-in-cards">
  <img />
</div>
<div class="card slide-in-cards">
  <img />
</div>
<div class="card slide-in-cards">
  <img />
</div>
<div class="card slide-in-cards">
  <img />
</div>
<div class="card slide-in-cards">
  <img />
</div>
<div class="card slide-in-cards">
  <img />
</div>
<div class="card slide-in-cards">
  <img />
</div>
<div class="card slide-in-cards">
  <img />
</div>
...
＆＃13;
{{1}}
＆＃13;
＆＃13;
＆＃13;