動畫的圖像的CSS給不同的結果

我有一個菜單和一個小酒吧，其中<a>標籤我懸停在我的菜單。動畫的圖像的CSS給不同的結果

小酒吧是一個圖像，我用jQuery動畫功能爲它的CSS製作動畫。

我的問題是，當我使用不同的瀏覽器或不同的分辨率時，我的小酒吧位置有點不同。

我需要那個酒吧總是適合完美。

與my fiddle的問題是，我使用的圖像

2012-07-17 Mathieu Cyr

請向我們展示您的代碼...或者更好地創建一個http://jsfiddle.net – ManseUK 2012-07-17 13:33:40

發佈您擁有的CSS和jQuery代碼（最好只是重要部分）。如果你不顯示任何代碼或鏈接，就不可能猜出萬億個原因中的哪一個是原因。如果只是跨瀏覽器問題，我會使用css reset/normalizer樣式表，但由於它也受到解決方案的影響，因此它可能與您的整個頁面設計或代碼有關。 – 2012-07-17 13:34:14

請修復你的小提琴。將框架切換到jQuery，並通過「添加資源」包含其餘的js。 – Christoph 2012-07-17 13:37:45

您不必repeat yourself每個項目，而不是你可以寫一個函數爲所有的人：

$("#smallMenu a").mouseover(function(){ 
    var $this = $(this), 
     os = $this.offset(); 
    $("#smallBar").clearQueue().animate({ 
     left: os.left, 
     top: os.top + $this.height(), 
     width: $this.width() 
    }); 
});

Fiddle

這將設置在同一left位置的懸停鏈接 - os.left - 正好低於懸停鏈接本身 - os.top + $this.height() - ，具有相同的w鏈接的寬度 - $this.width()，與頁面中的位置或大小無關。你可以調整它的需要（你可以添加或採用位置和寬度的像素）。

來源

2012-07-17 13:54:12

動畫的圖像的CSS給不同的結果

回答

相關問題