使用 setTimeout() 延遲事件

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;