Question

当用户将鼠标悬停在导航菜单上的按钮上时，我正在尝试将网站的徽标（logoName.png）更改为其他图像（logoHome.png，logoEvents.png等）#home，＃event等。）使用下面的脚本。当时间设置为0并且一切都在瞬间发生时，这样可以正常工作，但是当我放慢速度时，它不会按照我的意愿行事。

如果用户在悬停动画完成之前将鼠标移离按钮，则它不会恢复为徽标，如果用户直接在不同的导航按钮之间移动，则会显示徽标而不是导航图像对于按钮，鼠标现在处于打开状态。

我尝试过使用悬停，mouseenter / leave和mouseover / out无效。有没有办法更好地处理队列？或者我应该试试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);
});

jquery悬停问题

2 个答案: