Firefox中的mouseenter/mouseleave

我有一個腳本，當你懸停（mouseenter/mouseleave）時，它使用jQuery的easing插件來使鏈接easeOutBounce。我也有css樣式的jQuery，因爲我的圖像是使用css sprite創建的，因此根據懸停狀態X和Y位置會發生變化。這在Firefox以外的瀏覽器中工作正常。Firefox中的mouseenter/mouseleave

我想知道如果有人遇到過這個問題，他們可能已經發現解決這個問題的解決方案嗎？我從研究中發現，這與mouseenter/mouseleave方法有關。

這裏的代碼是如何工作的一個鏈接的例子：

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

這是重複的頁面上的其他鏈接

（示例顯示重新命名類和div的）。

/*編輯爲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'); 
    } 
    ); 
});

來源

2013-06-04 user2212564

<<這個工作在離開Firefox瀏覽器的罰款。>>那麼，是什麼發生在FF？ –

創建一個演示此問題的JSFIddle。 –

我現在會排出一個小提琴。在FF中，它只是沒有任何動畫或任何東西，但鏈接仍然工作。 – user2212564

我不明白這個問題。如果問題是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'); 
} 
); 
});

如果問題是，動畫有時是「跳躍」，改變停止功能停止（真，真）

來源

2013-06-04 10:43:03 FLX

嗨，看看你的代碼，FF中仍然沒有運氣，很奇怪！ – user2212564

將backgroundPositionX＆Y替換爲'background-position'：0 0和'background-position'：0 -156px – FLX

已經改變了背景位置，我在FF中獲得移動，但腳本中有語法錯誤（它不會不喜歡00和px），當它移動時，它移動到一邊並打破，我想它已經快到了！我將在上面解釋的例子中添加一個我已經使用的副本。 – user2212564

Firefox中的mouseenter/mouseleave

回答

相關問題