使用jimate，使用animate.css，动画不起作用

Question

我正在尝试在html上制作img动画，但它不起作用

HTML ：

<img class="col span-1-of-6 js--wp-1" src="img/emerson.jpg" alt="">

jQuery的：

$(document).ready(function() {

    $('.js--wp-1').waypoint(function(direction) {
      $('.js--wp-1').addClass('animated bounceInLeft');
    }, {
      offset: '50%'
    });
  });

控制台告诉我这些错误：

如果你看不到img：

jquery.min.js:4 Uncaught TypeError: f.getClientRects is not a function
    at r.fn.init.offset (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:4:20140)
    at t.(anonymous function) [as offset] (http://127.0.0.1:3000/js/jquery.waypoints.min.js:7:8010)
    at e.refresh (http://127.0.0.1:3000/js/jquery.waypoints.min.js:7:4744)
    at e.add (http://127.0.0.1:3000/js/jquery.waypoints.min.js:7:2807)
    at new t (http://127.0.0.1:3000/js/jquery.waypoints.min.js:7:827)
    at HTMLImageElement.<anonymous> (http://127.0.0.1:3000/js/jquery.waypoints.min.js:7:8466)
    at Function.each (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:2715)
    at r.fn.init.each (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:1003)
    at r.fn.init.waypoint (http://127.0.0.1:3000/js/jquery.waypoints.min.js:7:8337)
    at HTMLDocument.<anonymous> (http://127.0.0.1:3000/js/script.js:3:20)
offset @ jquery.min.js:4
t.(anonymous function) @ jquery.waypoints.min.js:7
e.refresh @ jquery.waypoints.min.js:7
e.add @ jquery.waypoints.min.js:7
t @ jquery.waypoints.min.js:7
(anonymous) @ jquery.waypoints.min.js:7
each @ jquery.min.js:2
each @ jquery.min.js:2
(anonymous) @ jquery.waypoints.min.js:7
(anonymous) @ script.js:3
j @ jquery.min.js:2
k @ jquery.min.js:2

一切都与html相关联，我不明白出了什么问题。有谁可以帮助我？

Answer 1

试试这个

<img class="col span-1-of-6 js_wp_1" src="img/emerson.jpg" alt="">


$(".js_wp_1").waypoint(function() {
   $('.js_wp_1').addClass('animated bounceInLeft');
  }
}, { offset: '50%'});

将_替换为_还