Question

我将此动画效果代码与js滚动一起使用：https://github.com/daneden/animate.css

我的js代码在最后一行包含一个类：

$(this).addClass('fadeInLeft');

这很棒，但有时我想更改fadeInLeft效果（例如slideInleft或flipInLeft）。如何在不同的div的那一行中添加不同的效果？

这是我的js代码：

$(document).ready(function() {
  // Check if element is scrolled into view
  function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

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

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
  }
  // If element is scrolled into view, fade it in
  $(window).scroll(function() {
    $('.scroll-animations .animated').each(function() {
      if (isScrolledIntoView(this) === true) {
        $(this).addClass('fadeInLeft');
      }
    });
  });
});

Answer 1

您可以在元素的自定义属性中指定动画类型。

$(window).scroll(function() {
  $('.scroll-animations .animated').each(function() {
    if (isScrolledIntoView(this) === true) {
      $(this).addClass($(this).data("animationType"));
    }
  });
});

<div class="scroll-animations">
  <div class="animated" data-animation-type="fadeInLeft"></div>
  <div class="animated" data-animation-type="flipInLeft"></div>
</div>

js中不同的动画效果

1 个答案: