Javascript 动画不'；t工作，使用jquery，使用animate.css

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

html：

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

控制台显示以下错误：

如果您看不到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

jquery.min.js:4未捕获类型错误：f.getClientRects不是函数
在r.fn.init.offset处(https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:4:20140)
at t.（匿名函数）[作为偏移量](http://127.0.0.1:3000/js/jquery.waypoints.min.js:7:8010)
在e.refresh(http://127.0.0.1:3000/js/jquery.waypoints.min.js:7:4744)
在e.add(http://127.0.0.1:3000/js/jquery.waypoints.min.js:7:2807)
在纽约(http://127.0.0.1:3000/js/jquery.waypoints.min.js:7:827)
在HTMLImageElement。(http://127.0.0.1:3000/js/jquery.waypoints.min.js:7:8466)
在功能上，每个(https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:2715)
在r.fn.init.每个(https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:1003)
在r.fn.init.waypoint(http://127.0.0.1:3000/js/jquery.waypoints.min.js:7:8337)
在HTMLDocument。(http://127.0.0.1:3000/js/script.js:3:20)
offset@jquery.min.js:4
t、 （匿名函数）@jquery.waypoints.min.js:7
e、 刷新@jquery.waypoints.min.js:7
e、 添加@jquery.waypoints.min.js:7
t@jquery.waypoints.min.js:7
（匿名）@jquery.waypoints.min.js:7
每个@jquery.min.js:2
每个@jquery.min.js:2
（匿名）@jquery.waypoints.min.js:7
（匿名）@script.js:3
j@jquery.min.js:2
k@jquery.min.js:2

所有的东西都链接在html上，我不明白出了什么问题。有人能帮我吗？

试试这个

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

$（.js_wp_1”）.航路点（函数（）{
$（'.js_wp_1'）.addClass（'animated bounceInLeft'）；
}
}，{偏移量：50%}）；

---

将html中的-替换为u也

是否包含了jquery.waypoints.min.jsadd from cdn是的，使用该cdn实际工作，一定存在一些兼容性问题。谢谢很高兴它对你有用

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