Firefox 中的 mouseenter/mouseleave

Question

我有一个脚本，当你悬停（mouseenter/mouseleave）时，它使用 jQuery 的缓动插件来使链接easeOutBounce。我在 jQuery 上也有 css 样式，因为我的图像是使用 css sprite 创建的，因此根据悬停状态，X 和 Y 位置会发生变化。这在 Firefox 以外的浏览器中运行良好。

我想知道是否有人以前遇到过这个问题以及他们可能找到的解决方案？我从研究中确定这与 mouseenter/mouseleave 方法有关。

下面是代码如何用于链接的示例：

（示例显示重命名的类和 div）

$(function() {
    $('#navigation').on('mouseenter', '#link-1:not(.selected)', function() {
        $(this).stop().animate({
            backgroundPositionX:0,
            backgroundPositionY:0
        }, 1000, 'easeOutBounce');
    }).on('mouseleave', '#link-1:not(.selected)', function() {
        $(this).stop().animate({
            backgroundPositionX:0,
            backgroundPositionY:-156
        }, 700, 'easeOutBack');
   });
});

对页面上的其他链接重复此操作。

/* 编辑为 FF 建议 - 不喜欢背景元素，但在这样编辑时会稍微工作，但背景 pos 的悬停状态需要为 00 并且不喜欢 -84 并且悬停将精灵带到侧而不倒！

$(function() {
    $('#navigation #link-1:not(.selected)').hover(
function () {
       $(this).stop().animate({
          'background-position':0
        }, 1000, 'easeOutBounce');
},
function () {
      $(this).stop().animate({
            'background-position': 0 -156
        }, 700, 'easeOutBack');
    }
    );
});

Answer 1

我不明白这个问题。 如果问题是 mouseleave 没有触发，我通过使用 hover() 函数而不是 mouseenter/mouseleave 来解决它。

你能试试这个代码吗？

$(function() {
    $('#navigation #link-1:not(.selected)').hover(
function () {
       $(this).stop().animate({
            backgroundPositionX:0,
            backgroundPositionY:0
        }, 1000, 'easeOutBounce');
},
function () {
      $(this).stop().animate({
            backgroundPositionX:0,
            backgroundPositionY:-156
        }, 700, 'easeOutBack');
}
);
});

如果问题是动画有时“跳跃”，将停止函数改为stop(true, true)