jQuery hover延时触发

来源:互联网 发布:淘宝真皮女装退货率 编辑:程序博客网 时间:2024/05/21 08:10
jQuery中的hover用起来十分简单,在配合animate,几乎你能想象到的所有超炫的效果都可以实现。可是越炫的效果持续执行的时间就越长。比如,鼠标放在div上面,div就缓缓上升,鼠标移走,div就缓缓下降。当我们的鼠标快速反复的穿过多个这样的div时,哇……闹鬼了,所有的div忽上忽下的无法停下。

其实,出现这种情况,只需要让事件延时一会儿触发就可以了,大约延时0.2秒就刚刚好。下面我贴出个例子,以便忘记的时候查阅:


$('.grow').hover(function(){    var _this = $(this);                    // 把$(this)对象赋给一个变量    trigger = setTimeout(function(){        _this.animate({height:'150px'},300);// jQuery的setTimeout中不能直接使用$(this)    },200);                                 // 延迟时间0.2秒}, function(){    clearTimeout(trigger);                  // 清除上面的延迟触发的事件    $(this).animate({height:'70px'},300);});


0 0
原创粉丝点击