jquery - 试图延迟 JQuery 悬停功能

Question

我有一个包含不同列表元素的导航栏，每当用户将鼠标悬停在元素上时，我都会尝试为每个元素调用不同的背景图像。我已经让它工作了，但是当我尝试更改代码以使图像淡入淡出时，我遇到了障碍。

这是我正在使用的 Javascript：

$(document).ready(function() {
    $("li").hover(
        function () {
            var navid = $(this).attr('id'); 
            $(this).addClass(navid);  
        },
        function () {
            var navid = $(this).attr('id'); 
            $(this).removeClass(navid);  }
    );
});

我已经尝试过 setTimeout 和转换，但没有任何运气。任何帮助将非常感激。

Answer 1

假设您想在悬停时将图像淡化为透明，并在鼠标离开时将其淡化为不透明。你会使用：

$(document).ready(function() {
    $("li").hover(
        function () {
            var navid = $(this).attr('id');
            $(this).addClass(navid);
            $(this).fadeTo('fast', 0);
        },
        function () {
            var navid = $(this).attr('id'); 
            $(this).removeClass(navid);
            $(this).fadeTo('fast', 1);
        }
    );
});