Question

我正在为一家电子商务网站开发一个超级菜单。我已经在这里上传了当前版本：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);
    })
iii

iii

请问有人可以帮我实现延迟效果吗？提前致谢。

Answer 1

我假定你的意思是他们需要在项目上悬停一段时间，菜单才会动画。使用 hoverIntent 插件来实现这个功能，而不是使用hover -- 这正是我所描述的。

Answer 2

用setTimeout()来延迟悬停，第二个参数为延迟的毫秒数。

Answer 3

按照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");
        });
    }

Answer 4

我已经使用过这个脚本执行类似的功能。

var menu = {I'm sorry, but you haven't provided any text for me to translate into Chinese. Could you please give me something to work with?; 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); I'm sorry, but you haven't provided any text for me to translate into Chinese. Could you please give me something to work with? // 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"); 
I'm sorry, but you haven't provided any text for me to translate into Chinese. Could you please give me something to work with?

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

I'm sorry, but you haven't provided any text for me to translate into Chinese. Could you please give me something to work with?

// 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  I'm sorry, but you haven't provided any text for me to translate into Chinese. Could you please give me something to work with?); 
I'm sorry, but you haven't provided any text for me to translate into Chinese. Could you please give me something to work with?

I'm sorry, but you haven't provided any text for me to translate into Chinese. Could you please give me something to work with?, menu.timeoutTime); I'm sorry, but you haven't provided any text for me to translate into Chinese. Could you please give me something to work with? ); I'm sorry, but you haven't provided any text for me to translate into Chinese. Could you please give me something to work with?

友情链接