Div不會在懸停時顯示

我會盡力並儘可能清楚。請記住，我是一個JQuery新手！Div不會在懸停時顯示

我正在使用此代碼創建1使用div的JQuery Megamenu。

我希望在懸停時觸發菜單，然後使用.dropdowntrigger淡入。然後，我想讓菜單在#menuwrap之外的鼠標上淡出。

問題是，在淡入之後需要延遲一段時間，因爲它會一直保持淡出狀態，然後才能將鼠標懸停在菜單上以使其可見...我想！

下面的代碼：

$(function() { 
    $('.dropdowntrigger').hover(function() { 
    $('#menuwrap').fadeIn(500); 
    }, function() { 
    $('#menuwrap').fadeOut(500); 
    }); 
});

任何幫助，這將是非常讚賞，並隨時讓我知道如果你需要更多的細節。

感謝，

丹尼爾

來源

2014-01-09 DannyBoy

增加淡出時間？（以毫秒爲單位） – Krishna

請發佈您的html的簡化版本，如果#menuwrap不在dropdowntrigger內，那麼您所描述的將會發生 – Huangism

您的fadeOut函數應該綁定到'.mouseleave'函數 – timo

-1

那是因爲你的加入充當性反應的功能，只是在第一個函數將完成第二個將繼續下去。

$(function() { 
    $('.dropdowntrigger').hover(function() { 
    $('#menuwrap').fadeIn(500); 
    }, function() { 
    $('#menuwrap').fadeOut(500); 
    }); 
});

這將在第一個（fadeIn()）函數完成時執行。所以你需要在這裏設置兩個獨立的功能。

嘗試改變他們

$('.dropdowntrigger').mouseover(function() { 
    $('#menuwrap').fadeIn(500); 
}); 
$('.dropdowntrigger').mouseleave(function() { 
    $('#menuwrap').fadeout(500); 
});

這樣，元素將淡出只有當你鼠標離開元素！

您可以使用setTimeout函數爲：

$('.dropdowntrigger').mouseleave(function() { 
    setTimeOut(fadeOutElement, 10000); 
}

而現在，功能：

function fadeOutElement() { 
    $('#menuwrap').fadeOut(); 
}

需要注意的是，setTimeout的是一個函數，它有兩個參數。

該函數的名稱將被執行！
以毫秒爲單位的時間！

setTimeOut(fadeOutElement, 10000)將查找功能名爲fadeOutElement和10秒後會執行（10000毫秒是10秒）。

來源

2014-01-09 15:40:01

感謝您的所有意見。我想我想要實現的是在淡出和#menuwrap需要在懸停時保持可見狀態之前的延遲。 – DannyBoy

當您使用我提供的代碼（第二個）時，元素會在懸停時保持可見狀態！以及什麼類型的延遲？你可以使用'setTimeOut（）'，然後在這個函數中加上你需要等待的時間。 –

嘿Afzaal，我試過這段代碼，但還是沒有運氣。請你能讓我知道我哪裏出錯了。 $（'。dropdowntrigger'）。mouseover（function（）{（'＃menuwrap'）。fadeIn（500）; }）; $（'。dropdowntrigger'）。mouseleave（） function（）{（'＃menuwrap'）.setTimeOut（1000）.fadeout（500）; }）; }）; – DannyBoy

你可以試試這個...我已經換你的淡入（500）和淡出（500）

看到這個LINK

$(document).ready(function() { 
    $('.dropdowntrigger').hover(function() { 
    $('#menuwrap').fadeOut(500); 
}, function() { 
$('#menuwrap').fadeIn(500); 
}); 
});

來源

2014-01-09 15:43:57

，如果我想對好試試這個：

$('.dropdowntrigger').mouseover(function() { 
$('#menuwrap').fadeIn(500); 
}); 
$('.dropdowntrigger').mouseleave(function() { 
$('#menuwrap').fadeout(500); 
}); 
$('#menuwrap').mouseover(function() { 
$('#menuwrap').fadeIn(); 
}); 
$('#menuwrap').mouseleave(function() { 
$('#menuwrap').fadeout(); 
});

來源

2014-01-09 15:45:10

Div不會在懸停時顯示

回答

相關問題