Как сделать указатель мыши до обновления страницы?

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().

Answer 2

Редактировать Этот ответ хуже , чем Джаспера .Но шаблон, который он использует, не требует jQuery, поэтому я оставлю его.

---

Что ж, вы можете пойти проще и использовать глобальную переменную, либо усложнить и полностью удалить событие.

простой выглядит следующим образом.

 var __GlobalEventFired = false;
 $(function() { 
 $("#page-flip").mouseover(function() {  
    if(!__GlobalEventFired)
    {
       __GlobalEventFired = true;
       $(".box").toggleClass("box-change"); 
       $(".films").toggleClass("films-change"); 
       $(".synopsis").toggleClass("synopsis-change"); 
    }
}); 
});