Delaying jQuery's handlerOut

Delaying jQuery's handlerOut

本文关键字：handlerOut jQuery Delaying      更新时间：2023-09-26

我正在使用以下jQuery函数：

$( selector ).hover( handlerIn, handlerOut )

现在，我想延迟" handlerOut"部分，但我似乎无法做到这一点。我尝试使用delay()和setTimeout()但它们都不起作用。我认为这是一个语法问题。这是我的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

<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>

我认为你应该像这样将其转换为纯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"});
    });
});

尝试一下，看看它是否有效。

相关文章：