javascript - jQuery 队列不起作用

Question

我想要完成的事情:

让队列中的多张卡片在文档准备就绪时依次滑入，对于页面加载时不可见的元素，我希望它们在滚动时也一样。

问题:

所有元素同时滑入。 (即使我使用的是每个循环)


示例:

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

.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;
}

<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>
   ...

到目前为止我做了什么:

我的标记如下所示:

   <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. 请记住，不同元素上的动画并行；每个元素都有自己的动画队列。

2. 您曾说过当出现更多元素时遇到问题。那是因为您没有从要设置动画的元素选择中删除它们。

3. 您的 if (elem.hasClass(animationClass)) 检查是不必要的，因为您只选择了具有该类的元素。

所以(参见 *** 注释行):

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

.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;
}

<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>
...