0

ECサイトのメガメニューを開発中です。現在のバージョンを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

4 に答える 4

0

このスクリプトを同様の機能に使用しました。

var menu = {}; menu.laatstGeopend = null; menu.timeoutTime = 1000; menu.timeout = null; menu.init = function() {

$("#menu>li").hover( function() {
// 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");

$(this).addClass("hover"); 
if($(this).hasClass("uitklappen"))
{
 $(this).addClass("uitklappen_hover"); 
}

$(">ul", this).hide().slideDown(300);

}

// selectbox in

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' }); 
}

}、menu.timeoutTime); } ); }

于 2010-02-16T11:43:51.767 に答える