Методы остановки/возобновления анимации jQuery или шаблоны

Я видел некоторые другие - полусвязанные сообщения - но ничего, что действительно на 100% отвечало бы на мой вопрос.

В любом случае, то, что я хотел бы сделать, это пауза + исчезновение при наведении курсора, пауза + исчезновение при наведении курсора, таким образом, анимация не завершается, если пользователь не остается наведенным или наведенным. Если пользователь делает кучу быстрых наведений и зависаний, я не хочу, чтобы он ставил в очередь кучу последовательных анимаций. Я приблизился, используя stop() и clearQueue(), но есть проблемы.

Если я наведу курсор, наведу курсор и снова быстро наведу курсор, анимация приостановится, но не перейдет к следующей анимации. На самом деле, достаточное количество наведения и hoverOuts приводит к тому, что анимация полностью перестает происходить на моем компьютере.

Ознакомьтесь с приведенной ниже страницей примера и прикрепленным сценарием. Может быть, есть общая закономерность или подход к этому конкретному вопросу? Я довольно часто вижу подобные вещи в Интернете, иногда с анимацией затухания, иногда с анимацией движения и т. д.

В этом примере я намеренно использую медленную анимацию, чтобы у вас было достаточно времени, чтобы навести и отвести курсор достаточное количество раз.

Демонстрация: http://ficreates.com/_SiteDemos/lwv2/

Сценарий: http://ficreates.com/_SiteDemos/lwv2/scripts/carNav.js

В любом случае, заранее спасибо за любую помощь, которую вы можете мне оказать :) Она мне определенно понадобится!


animation jquery hover onhover queuing
person SC_Chupacabra    schedule 21.01.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это то, что вы ищите?

    function carNav() {
        var $navBox = $("#nav_buttons li");

        $navBox.hover(
            function() {
                var $navCar = $(this).find(".nav_car");
                $navCar.fadeIn(2000);
            },
            function() {
                var $navCar = $(this).find(".nav_car");                 
                $navCar.stop().fadeOut(2000);
            }
        );
    }

    $(document).ready(carNav);

ДЕМО http://jsfiddle.net/m2pF5/

или вы можете сделать это полностью с помощью css (потребуется запасной вариант для ie)

ДЕМО CSS http://jsfiddle.net/eNJ6x/1/

person Fresheyeball    schedule 21.01.2013
comment
Я заметил, что если вы сделаете следующие шаги: Hover HoverOut - person SC_Chupacabra; 21.01.2013
comment
Извините, я написал до того, как закончил. Если вы наведете курсор, наведите указатель мыши и снова наведите указатель мыши, анимация все равно зависнет на неопределенный срок. Код, который вы разместили, является улучшением (спасибо за это), но странное зависание все еще происходит... и я не совсем уверен, почему. - person SC_Chupacabra; 21.01.2013
comment
... Если только каждый раз, когда происходит событие наведения, возможно, новое событие наведения находится в другой области, чем старая, и, следовательно, не может напрямую управлять анимацией в очереди? - person SC_Chupacabra; 21.01.2013
comment
У меня есть другая мысль, но она не будет анимироваться в ie6-9. Имеет ли для вас значение, если он не анимируется в этих браузерах? - person Fresheyeball; 21.01.2013
comment
Хммм.... Я не думал об этом! Отличное решение. Я знаю, что этот подход сработает для моего клиента, но я все еще думаю, что это сведет меня с ума, если я не буду знать, как решить эту проблему. Отчасти это связано с тем, что я пытался лучше выполнять эти тонкие штрихи пользовательского интерфейса, поэтому я хочу продолжать работать над этим, пока не разберусь с подходом jQuery. Таким образом, в следующий раз у меня будет хороший код, к которому я смогу вернуться и сослаться на него. - person SC_Chupacabra; 21.01.2013
comment
Определенно лучше, но я хочу точно такую ​​же функциональность, как и подход только с CSS, но в jQuery, чтобы избежать необходимости в запасном варианте ie. Вечером поковыряюсь и отчитаюсь. Большое спасибо!!! Ты восхитителен. - person SC_Chupacabra; 22.01.2013