[英]Delaying jQuery's handlerOut
I'm using the following jQuery function: 我正在使用以下jQuery函数:
$( selector ).hover( handlerIn, handlerOut )
Now, I want to delay the " handlerOut
" part, but I can't seem to get this working. 现在,我想延迟“
handlerOut
”部分,但似乎无法正常工作。 I've tried using delay()
and setTimeout()
but they both didn't work. 我试过使用
delay()
和setTimeout()
但是它们都不起作用。 I think it's a syntax thing. 我认为这是语法问题。 Here's my JS:
这是我的JS:
$(document).ready(function () {
var menuItem2 = document.getElementById('#menu_item_2');
var menuItem3 = document.getElementById('#menu_item_3');
$('#menu_item_2').hover(function () {
this.style.zIndex = "1";
menuItem3.style.zIndex = "0";
});
$('#menu_item_3').hover(function () {
this.style.zIndex = "1";
menuItem2.style.zIndex = "0";
}, function () {
$(this).delay(500).style.zIndex = "0";
});
});
HTML 的HTML
<div id="menu_parent2">
<a href="#music">
<div class="menuItem" id="menu_item_2">
<h5>Music</h5>
<hr>
<p>Displays my music projects</p>
</div>
</a>
<a href="#contact">
<div class="menuItem" id="menu_item_3">
<h5>Contact</h5>
<hr>
<p>Displays a contact form</p>
</div>
</a>
</div>
I think the you should convert it to pure Jquery like this: 我认为您应该将其转换为纯Jquery,如下所示:
$(document).ready(function () {
$('#menu_item_2').hover(function () {
$(this).css({"z-index":1});
$("#menu_item_3").css({"z-index":0});
});
$('#menu_item_3').hover(function () {
$(this).css({"z-index":1});
$("#menu_item_2").css({"z-index":0});
}, function () {
$(this).delay(2000).css({"z-index" : 0,"background-color" : "red"});
});
});
Try it out and see if it works. 试试看,看看是否可行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.