animate.css配合js处理hover事件时的bug处理

animate.css配合js,在处理鼠标滑过事件时,直接用hover用户体验很不友好

今天遇到一个问题是配合animate.css做一个动画效果,这个动画库的优点在于操作简单,直接addClass就可以了。对于鼠标滑过事件,之前的操作时移入addClass, 移出是再removeClass,但是有一个问题是,当动画效果还没有进行完时移出鼠标然后移入另一个,就直接执行了removeClass的事件,动效会直接终止,用户体验很差。 所以今天试了另一个思路,用timeout来执行移除class的操作。感觉和谐了很多

效果展示看这里
$('#teachers ul li').mouseover(function(){
    var _this =$(this).find('.img ')
    if(_this.hasClass('swing')) {
        return
    }
    _this.addClass('swing')
    var timer = setTimeout(function(){
        _this.removeClass('swing')
        clearTimeout(timer)
    },1000)
})

随机浏览