javascript - 如何使鼠标悬停在页面刷新之前保持不变？

Question

我希望在延迟后处理 mouseover 事件，然后在页面刷新之前处于非事件状态。

到目前为止，这是我的代码:

$(function() {
    $("#page-flip").mouseover(function() { 
        $(".box").toggleClass("box-change");
        $(".films").toggleClass("films-change");
        $(".synopsis").toggleClass("synopsis-change");
    });
});

我如何为此添加时间延迟，而不是在完全触发一次后使其处于非事件状态？谢谢 :)

Answer 1

您可以使用 .one() 让事件处理程序只触发一次:

$(function() {
    //bind a mouseover event handler that will fire only once
    $("#page-flip").one('mouseover', function() { 

        //set a timeout so the code runs after half a second
        setTimeout(function () {

            //run your code here
            $(".box").toggleClass("box-change");
            $(".films").toggleClass("films-change");
            $(".synopsis").toggleClass("synopsis-change");
        }, 500);
    });
});

这是一个演示:http://jsfiddle.net/jasper/fWakf/3/

文档:http://api.jquery.com/one

你也可以使用 .off():

$(function() {
    $("#page-flip").on('mouseover', function() { 

        //remove this event handler so it doesn't fire in the future
        $(this).off('mouseover');
        setTimeout(function () {
            $(".box").toggleClass("box-change");
            $(".films").toggleClass("films-change");
            $(".synopsis").toggleClass("synopsis-change");
        }, 500);
    });
});

这是一个演示:http://jsfiddle.net/jasper/fWakf/4/

请注意 .on() 是 jQuery 1.7 中的新内容，在本例中与 .bind() 相同。 .off() 也是新的，因此如果您使用的是早于 1.7 的版本和 .bind()，请使用 .unbind()。