Question

这是一个工作函数，我一直用来在一个元素被悬停时立即向一个单独的元素添加/删除一个类：

$(document).ready(function() {     
    $('.mm-parent:not(.mm-active)').hover(function(){      
        $('.mm-active').addClass('activefix');    
    },     
    function(){    
        $('.mm-active').removeClass('activefix');     
    });
});

但是，我正在尝试：

延迟添加课程直到1秒过去。
同样让它在经过1秒钟后删除它。

我不知道我是否走在正确的轨道上，但这就是我所拥有的：

$(document).ready.setTimeout(function() {     
    $('.mm-parent:not(.mm-active)').hover(function(){     
        $('.mm-active').addClass('activefix');    
    },     
    function(){    
        $('.mm-active').removeClass('activefix');     
    }, 1000);
});

任何帮助将不胜感激。谢谢！

Answer 1

尝试

$(document).ready(function () {
    var timer;
    $('.mm-parent:not(.mm-active)').hover(function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            $('.mm-active').addClass('activefix');
        }, 1000)
    }, function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            $('.mm-active').removeClass('activefix');
        }, 1000)
    });
});

Answer 2

试试这个

$(document).ready(function() {     
   $('.mm-parent:not(.mm-active)').hover(function(){      
        setTimeout(function(){
                $('.mm-active').addClass('activefix'); 
                setTimeout(function(){$('.mm-active').removeClass('activefix');},1000);
        },1000);

    });    
});

基本上你必须在悬停后1秒运行一个功能，在1秒后内部再运行一个功能。

JsFiddle http://jsfiddle.net/L8B73/

Answer 3

使用可能符合您需求的CSS转换。

 -webkit-transition: all 1s ease-out;  /* Chrome 1-25, Safari 3.2+ */
 -moz-transition: all 1s ease-out;  /* Firefox 4-15 */
 -o-transition: all 1s ease-out;  /* Opera 10.50–12.00 */
 transition: all 1s ease-out;

使用setTimeout（）来延迟事件

3 个答案: