Animate实现鼠标经过动画效果

动画效果可以参照animate.css

注:图片默认是不动的,当鼠标经过的时候才会动。
原理很简单--通过js,添加鼠标经过事件,鼠标经过时,把当前元素存放在“data-in”里的“swing”添加到class里,前提animated这个类一定要加上,要不然动画不起作用。

1.html结构

--先引入css文件

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

你可能感兴趣的:(Animate实现鼠标经过动画效果)