Question

我正在尝试使用悬停事件创建两个“按钮”，隐藏一些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放入一个hide / show。

另外，我应该提到#default，＃servers和#hosting div出现在完全相同的位置。所以需要在同一时间立即切换（上面做了）。

编辑 - 在http://jsfiddle.net/KH4tt/1/使用clearTimeout的最新尝试 - 但无法使其正常工作。

Answer 1

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

$(selector).delay(1000).hide("slow");

Answer 2

尝试这样的事情

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

Answer 3

好的，最后使用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();
});

});

jQuery交换div悬停与延迟

3 个答案: