jquery悬停问题

Question

当用户将鼠标悬停在导航菜单上的按钮（#home、#events 等）上时，我尝试将网站的徽标（logoName.png）更改为其他图像（logoHome.png、logoEvents.png 等）下面的脚本。当时间设置为 0 并且一切都立即发生时，这种方法工作得很好，但是当我放慢速度时，它并没有按照我想要的方式进行。

如果用户在悬停动画完成之前将鼠标从按钮上移开，则不会恢复到徽标，并且如果用户直接在不同的导航按钮之间移动，则会显示徽标而不是按钮的导航图像鼠标现已打开。

我尝试过使用悬停、鼠标进入/离开和鼠标悬停/退出，但无济于事。有什么办法可以更好地处理队列吗？或者我应该尝试hoverIntent？

感谢所有建议 - 我对这一切都是新手！谢谢。

$('#home').hover(function() {
    $('#logo').hide(
        500,
        function() {
            $('#logo').attr ('src', 'images/logoHome.png').fadeIn(500); // swaps logo for home image
        });
}, function() {
    $('#logo').hide(
        500,
        function () {
            $('#logo').attr('src', 'images/logoName.png').fadeIn(500); //swaps back
        });
});

$('#events').hover(function() {
    $('#logo').hide(
        500,
        function() {
            $('#logo').attr ('src', 'images/logoEvents.png').fadeIn(500); //swaps logo for events image
        });
}, function() {
    $('#logo').hide(
        500,
        function () {
            $('#logo').attr('src', 'images/logoName.png').fadeIn(500); //swaps back
        });
});

编辑： - 任何感兴趣的人的工作版本：

$('#home').hover(function() {
    $('#logo').stop(true, true).fadeOut(
        500,
        function() {
            $('#logo').attr ('src', 'images/logoHome.png').fadeIn(500); // swaps logo for home image
        });
    }, function() {
$('#logo').stop(true, true).fadeOut(
    500,
    function () {
        $('#logo').attr('src', 'images/logoName.png').fadeIn(500); //swaps back
    });
});

等

感谢您的帮助。

Answer 1

您是否尝试过在没有回调的情况下执行此操作？

$('#home').hover(function() {
    $('#logo').fadeOut(500).attr ('src', 'images/logoHome.png').fadeIn(500);
}, function() {
    $('#logo').fadeOut(500).attr('src', 'images/logoName.png').fadeIn(500);
});

$('#events').hover(function() {
    $('#logo').fadeOut(500).attr('src', 'images/logoEvents.png').fadeIn(500);
}, function() {
    $('#logo').fadeOut(500).attr('src', 'images/logoName.png').fadeIn(500);
});

另一个选择是新的 jQuery 函数 .clearQueue()

Answer 2

尝试使用 .stop() 方法来中断之前的缓动

$('#home').hover(function() {
    $('#logo').stop().fadeOut(500).attr ('src', 'images/logoHome.png').fadeIn(500);
}, function() {
    $('#logo').stop().fadeOut(500).attr('src', 'images/logoName.png').fadeIn(500);
});

$('#events').hover(function() {
    $('#logo').stop().fadeOut(500).attr('src', 'images/logoEvents.png').fadeIn(500);
}, function() {
    $('#logo').stop().fadeOut(500).attr('src', 'images/logoName.png').fadeIn(500);
});