Firefox中的JQuery動畫口吃

我目前正在製作我的第一個網站，我正在使用JQuery製作動畫。 IE中的動畫非常流暢，但在Firefox中，它的結局非常嚴重。該網站是www.chiahaoyang.com。我花了無數個小時試圖解決它沒有可用性。謝謝！Firefox中的JQuery動畫口吃

UPDATE1：jQuery的加載/動畫代碼：

function ajaxLoad(input){ 
     contentBox.fadeIn(); 
     content.fadeOut("medium",function() { 
      content.load("ajax_pages/"+input+".html", function(){ 
       var contentHeight = content.height(); 
       if(contentHeight > screen.height*0.66){ 
        contentBox.animate({height: screen.height*0.66},"slow",function(){ 
         content.delay(500).fadeIn("slow"); 
        }); 
       } else { 
        contentBox.animate({height: contentHeight},"slow",function(){ 
         content.delay(500).fadeIn("slow"); 
        });    
       } 
      }); 
     }); 
    };

內容是我加載AJAX頁面到div。 contentBox是div封閉內容

更新2：抖動現象的根源是一些CSS3屬性：

-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.15); 
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.15); 
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.15);

這是有道理的，這些改進將更多負載上的瀏覽器，但是有什麼方法解決它，使Firefox呈現與IE一樣流暢？

更新3：好吧，我剛剛更換上面的代碼：

-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1), inset 0 0 5px rgba(0, 0, 0, 0.15); 
-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1), inset 0 0 5px rgba(0, 0, 0, 0.15); 
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1), inset 0 0 5px rgba(0, 0, 0, 0.15);

現在是順暢了很多...

來源

2012-05-27 Danny Yang

我認爲這與計算機的圖形卡和處理能力有關，以及瀏覽器如何渲染頁面。 – nhahtdh

我點擊了「簡歷」，它花了6.21s來執行GET ...你需要改進你的方法來顯示內容！ – Zuul

@nhahtdh我非常懷疑這是問題。動畫在IE中非常流暢，但不是Firefox。 –

這個問題對我來說是很討厭，我設計我的並且我必須降低Firefox的盒子陰影效果才能正常運行它，更不用說jquery元素了......如果有太多的盒子陰影效果，那些元素甚至無法運行。我不明白爲什麼這不會發生，如果我使用IE瀏覽器，我的網站運行平穩如水。顯然這裏發生了一些事情，請有人給我們一些幫助:)謝謝。

來源

2012-05-30 15:05:20 Pablo

Firefox中的JQuery動畫口吃

回答

相關問題