0

ホバー イベントを使用して 2 つの「ボタン」を作成しようとしています。いくつかの div を非表示にしてから、他の div をその場所に表示します。次に、スワップをデフォルトのdivに戻すのを遅らせようとしています。

あるボタンから別のボタンに移動すると、遅延が経過するまで同時に多くの div が表示されない限り、すべて正常に機能します。遅延を使用しない場合、完全に機能します。

ジャバスクリプト：

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

});

タイムアウトをキャンセルできるように、1つのホバー機能を他のホバー機能に認識させる必要があると思いますが、それを行う方法がわかりません。

編集 - コードを整理して、すべての div を 1 つの非表示/表示にします。

また、#default、#servers、および #hosting div がまったく同じ場所に表示されることをおそらく言及する必要がありました。したがって、同時に即座に切り替える必要があります（上記はそうです）。

編集 - ここで clearTimeout を使用する最新の試みhttp://jsfiddle.net/KH4tt/1/ - しかし、それを正しく機能させることはできません。

4

3 に答える 3

1

次の例のように、jquery（私はJquery 1.7.1バージョンを使用しています）で.delay（）関数を使用できます。

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

これが、clearTimeout（）関数を使用して、遅延を作成するmouseleave（ホバー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 に答える
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 に答える