使用 setTimeout() 延迟事件

Question

This is a working function that I've been using to add/remove a class to a separate element immediately when one element has been hovered on:

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

However, I'm trying to:

• Delay it from adding the class until 1 second has passed.
• Also have it remove the class after its own 1 second has passed.

I don't know if I'm on the right track, but here is what I have:

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

Answer 1

Try

$(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

Try this

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

    });    
});

Basically you have to run a function 1 sec after hover which internally runs one more function after 1 sec.

JsFiddle http://jsfiddle.net/L8B73/

Answer 3

Use CSS transition,that might serve your need.

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