0

我正在尝试创建两个使用悬停事件的“按钮”，隐藏一些 div，然后在它们的位置显示其他一些。然后我试图延迟交换回默认 div。

一切正常，除非您从一个按钮转到另一个按钮，此时您会同时显示许多 div，直到延迟过去。如果我们不使用延迟，它会完美运行。

的JavaScript：

jQuery(function ($) {

$('#servers-btn').hover(
   function() {
    $('#servers, #servers-heading, #servers-arrow').show(0);
    $('#default, #default-heading').hide(0);
   }, 
   function() {
   setTimeout( function() {
        $('#servers, #servers-heading, #servers-arrow').hide(0);
        $('#default, #default-heading').show(0);
        },1000)
    }
);

$('#hosting-btn').hover(
   function() {
    $('#hosting, #hosting-heading, #hosting-arrow').show(0);
    $('#default, #default-heading').hide(0);
   }, 
   function() {
   setTimeout( function() {
        $('#hosting, #hosting-heading, #hosting-arrow').hide(0);
        $('#default, #default-heading').show(0);
        },1000)
    }
);

});

我假设我需要让一个悬停功能知道另一个悬停功能，以便它可以取消超时，我只是不知道该怎么做。

编辑 - 刚刚整理代码将所有 div 放入一个隐藏/显示中。

另外，我可能应该提到#default、#servers 和#hosting div 出现在完全相同的位置。所以需要同时立即切换（上面就是这样）。

编辑 - 在这里使用 clearTimeout 的最新尝试http://jsfiddle.net/KH4tt/1/ - 但不能让它正常工作。

4

3 回答 3

1

您可以在 jquery 中使用 .delay() 函数（我使用的是 Jquery 1.7.1 版本），如下例所示：

$(selector).delay(1000).hide("slow");
于 2012-05-16T05:54:32.230 回答
0

尝试这样的事情

$('#servers-btn').hover(
   function() {
    $('#servers, #servers-heading, #servers-arrow').show(0);
    $('#default, #default-heading').hide(1000, function() {
        $('#servers, #servers-heading, #servers-arrow').hide(0);
        $('#default, #default-heading').show(0);
    });
   }
);
于 2012-05-16T05:48:29.273 回答
0

好的，这是使用 clearTimeout() 函数取消在 mouseleave (hover handlerOut) 上使用的 setTimeout() 产生延迟的最后一件事：

jQuery(function($) {

var timeoutserver;

function canceltimeout() {
if (timeoutserver) {
    window.clearTimeout(timeoutserver);
    timeoutserver = null;
}
}

function closeServertime() {
    timeoutserver = window.setTimeout(function() {
        $('#servers, #servers-heading, #servers-arrow').hide(0);
        $('#default, #default-heading').show(0);
    }, 1000);        
}

function closeHostingtime() {
    timeoutserver = window.setTimeout(function() {
        $('#hosting, #hosting-heading, #hosting-arrow').hide(0);
        $('#default, #default-heading').show(0);
    }, 1000);        
}


$('#servers-btn').hover(

function() {
    canceltimeout();
    $('#servers, #servers-heading, #servers-arrow, ').show(0);
    $('#default, #default-heading, #hosting, #hosting-heading, #hosting-arrow').hide(0);
}, function() {
    closeServertime();
});

$('#hosting-btn').hover(

function() {
    canceltimeout();
    $('#hosting, #hosting-heading, #hosting-arrow').show(0);
    $('#default, #default-heading, #servers, #servers-heading, #servers-arrow').hide(0);
}, function() {
    closeHostingtime();
});

});
于 2012-05-16T23:23:57.207 回答