1

我有一个脚本，当您悬停（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');
    }
    );
});
4

1 回答 1

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)

于 2013-06-04T10:43:03.407 回答