jQuery+animate.css实现图片悬停特效
  • 分享到微信朋友圈
    X
立即下载 查看演示

animate.css 是一个来自国外的 CSS3 动画库,内置了很多典型的 css3 动画,兼容性好使用方便。animate.css 可以在网页上快速轻松地添加动画。animate.css 包含的动画有 抖动（shake）、 闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多种动画效果， 几乎包含了所有常见的动画效果。

本案例介绍通过 jQuery 给元素添加这些 animate class.

关键js与说明

//引用jquery框架
<script src="js/jquery.min.js" type="text/javascript"></script>
<script>
    //鼠标移入
    $('.an1').hover(function () {
        //添加classname swing
        $(this).addClass('swing')
    }, function () {
        //鼠标移出
        $(this).removeClass('swing')
    })
    //鼠标移入
    $('.an2').hover(function () {
        //添加classname bounceIn
        $(this).addClass('bounceIn')
    }, function () {
        //鼠标移出
        $(this).removeClass('bounceIn')
    })
    //鼠标移入
    $('.an3').hover(function () {
        //添加classname flash
        $(this).addClass('flash')
    }, function () {
        //鼠标移出
        $(this).removeClass('flash')
    })
    //鼠标移入
    $('.an4').hover(function () {
        //添加classname wobble
        $(this).addClass('wobble')
    }, function () {
        //鼠标移出
        $(this).removeClass('wobble')
    }) 
</script>