试图延迟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

假设您希望在悬停时将图像淡化为透明，并在mouseleave上将图像淡化为不透明。你会用：

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