アニメーションはanimate.css

Question

私は、HTMLのIMGをアニメーション化しようとしている

を使用して、jqueryのを使用して、動作しませんが、それは動作しません

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

コンソールは私にこれらのerrosを示しています

あなたがIMGを見ることができない場合：すべてがHTMLにリンクされている

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 

、私が間違って何が起こっているのか理解していません。誰でも助けてくれますか？

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

を試す - も