jquery 鼠标经过 Animate动画效果
注:图片默认是不动的,当鼠标经过的时候才会动。
原理很简单--通过js,添加鼠标经过事件,鼠标经过时,把当前元素存放在“data-in”里的“swing”添加到class里,前提animated这个类一定要加上,要不然动画不起作用。
1.html结构
--先引入css文件
1.
<link href="animate.min.css" rel="stylesheet">
2.
$(".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); }); });