эффект задержки jquery - PullRequest
Новая
       23

эффект задержки jquery

0 голосов
/ 15 февраля 2010

Я разрабатываю мегаменю для сайта электронной коммерции. Я загрузил текущую версию здесь: http://www.nicklansdell.com/menu/. Меню прекрасно работает с или без JavaScript в данный момент. Что мне действительно хотелось бы, так это улучшить удобство использования, когда пользователь включил javascript, создав небольшую задержку, прежде чем произойдет анимация меню. Мой код jquery до сих пор: 

$(function() {
// If no JS CSS menu will still work
$("#menu").removeClass("cssonly");

// Find subnav menus and slide them down
$("#menu li a").hover(function(){ 
    $(this).parent().find("div.subnav").fadeIn(200);
    $(this).parent().hover(function() {
    }, function() {
        // On hovering out slide subnav menus back up
        $(this).parent().find("div.subnav").fadeOut(200);
    })
});

});

Может кто-нибудь помочь мне достичь эффекта задержки? Большое спасибо заранее.

Ответы [ 4 ]

1 голос
/ 15 февраля 2010

Я предполагаю, что вы имеете в виду, что им нужно навести курсор на элемент на некоторое время, прежде чем меню оживит. Для этого используйте плагин hoverIntent вместо hover - делает именно то, что я описал.

0 голосов
/ 16 февраля 2010

Я использовал этот скрипт для аналогичной функции.

var menu = {}; menu.laatstGeopend = null; menu.timeoutTime = 1000; menu.timeout = null; menu.init = function() { </p> <p>$("#menu>li").hover( function() {<br> // als laatstegeopend dezelfde is als de huidige, dan de timeout verwijderen if($(this).hasClass("hover")) { clearTimeout(menu.timeout); } // nieuwe uitschuiven else { $("#menu>li>ul").hide(); $("#menu>li").not(this).removeClass("hover").removeClass("uitklappen_hover");</p> <pre><code>$(this).addClass("hover"); if($(this).hasClass("uitklappen")) { $(this).addClass("uitklappen_hover"); } $(">ul", this).hide().slideDown(300);

}

// выберите в

clearTimeout (menu.timeout); menu.timeout = setTimeout (function () { $ (menu.laatstGeopend) .removeClass ("hover uitklappen_hover"); 

// selectbox in <ie7 tonen
if($.browser.msie && $.browser.version < 7) {
 $("select").css({ visibility: 'visible' }); 
}
</code>

}, menu.timeoutTime); } ); }

0 голосов
/ 15 февраля 2010

По предложению tvanfosson: 

        $(document).ready(function(){
        $("#menu li a.link").hoverIntent({
            sensitivity: 3, 
            interval: 200, 
            over: animateOut, 
            timeout: 500, 
            out: animateIn
        });
    }); // close document.ready

    function animateOut(){  
        $(this).addClass("current");
        $(this).parent().find("div.subnav").fadeIn(200);
    }

    function animateIn(){
        $(this).parent().hover(function() {
        }, function() {
        // On hovering out fade subnav menus back in
        $(this).parent().find("div.subnav").fadeOut(200);
        $("#menu li a.link").removeClass("current");
        });
    }
0 голосов
/ 15 февраля 2010

Задержка наведения с помощью setTimeout (), 2-й аргумент - задержка в миллисекундах

...