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');
}
);
});

如果问题是动画有时“跳跃”，请将停止功能更改为停止（true，true）

Firefox中的mouseenter / mouseleave

1 个答案: