動畫效果可以參照animate.css
注：圖片默認(rèn)是不動的胳嘲，當(dāng)鼠標(biāo)經(jīng)過的時候才會動圃伶。
原理很簡單--通過js悲关，添加鼠標(biāo)經(jīng)過事件襟锐，鼠標(biāo)經(jīng)過時撤逢，把當(dāng)前元素存放在“data-in”里的“swing”添加到class里，前提animated這個類一定要加上，要不然動畫不起作用蚊荣。
1.html結(jié)構(gòu)
--先引入css文件
<link rel="stylesheet">
<img class="animated hover_" data-in="swing" src="https://img.alicdn.com/tps/
TB1_R_pKpXXXXauXXXXXXXXXXXX-406-396.png">
2.js
$(".hover_").on("mouseenter",function(e){
var This=$(this);
var hin=This.attr("data-in");
This.addClass(hin);
This.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd
oanimationend animationend', function(){
$(this).removeClass(hin);
});
});
