jquery - 滚动时为图像设置动画

Question

我正在使用 http://daneden.me/animate 中的 animate.css|

我想在向下滚动和图像聚焦时为图像设置动画。我在标签中添加 .animated 类，在 data-animate 属性中添加动画类型，如下所示:

HTML

<img src="images/img-grow.png" alt="Grow" class="img-responsive animated" data-animate="bounceInRight">

当图像在向下滚动过程中获得焦点时，它应该添加数据动画属性，即 bounceInRight 到类中，以便动画发生。

它可以是 bounceInRight 或 bounceInLeft 或 animate.css 中的任何其他动画标签

JS

$(document).ready(function () {

  if ($(".animated").focus() ) {
      var elementAnimation = $(this).attr('data-animate');
       $(this).addClass( elementAnimation );
   }
});

但是上面的代码不起作用。有帮助吗？

另外，每次刷新页面时最好只播放一次动画。

Answer 1

试试这个

var animateHeight = $(".img-responsive").offset().top;

$(function() {
    var addAnimation = $('.img-responsive');
    var animateHeight = $(".img-responsive").offset().top;
    var animateHeight_end  = $(".img-responsive").offset().top + $(".img-responsive").height();
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= animateHeight && scroll <=  animateHeight_end ) {
            addAnimation.addClass('animated bounceInRight');
        } else {
            addAnimation.removeClass('animated bounceInRight');
        }
    });
});