2017-06-18 57 views
0

我试图动画上一个HTML IMG,但它不工作动画不能正常工作,使用jQuery,使用animate.css

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

控制台显示我这些误差修改: enter image description here

如果你不能看到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链接,我不知道发生了什么错误。谁能帮我?

+0

有你包括jquery.waypoints.min.js – 2017-06-18 15:07:12

+1

从CDN https://cdnjs.cloudflare.com/ajax添加/libs/waypoints/4.0.1/jquery.waypoints.js – 2017-06-18 15:08:08

+0

回答

0

试试这个

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

更换 - 用_也是

在HTML