jQuery Animation Stop / Resume Techniques или Шаблоны

Question

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

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

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

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

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

Демо: http://ficreates.com/_SiteDemos/lwv2/

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

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

Answer 1

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

    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 (для этого потребуется запасной вариант)

CSS DEMO http://jsfiddle.net/eNJ6x/1/