Animate.css+js实现鼠标经过动画效果

Posted 2021-02-09 Mankii

动画效果可以参照animate.css

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

1、引入animate.css

<link href="https://cdn.bootcss.com/animate.css/3.5.1/animate.min.css" rel="stylesheet">

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

3、使用示例

<img  class="animated hover_" data-in="swing" src="https://img.alicdn.com/tps/
TB1_R_pKpXXXXauXXXXXXXXXXXX-406-396.png">

TIP：当然也可以自己编写动画的css

 转自：https://www.jianshu.com/p/5f5658375660