jQuery Animate無法在Chrome上工作

-1

我在這裏與Google Chrome有一些小問題。我的代碼在Safari上運行得非常好，這讓我認爲它應該可以在谷歌瀏覽器上正常運行。但Chrome並沒有按照預期製作動畫。什麼可能是錯的？jQuery Animate無法在Chrome上工作

$(function() { 
    var sourceFoto = $(".empreendimento .main-photo img").attr("src"); 
    var alturaFoto; 
    var larguraFoto; 
    var limiteX; 
    var limiteY; 
    $(document).load(sourceFoto, function() { 

     alturaFoto = $(".empreendimento .main-photo img").height(); 
     larguraFoto = $(".empreendimento .main-photo img").width(); 

     limiteY = Math.round(alturaFoto - 420); 
     limiteX = Math.round(larguraFoto - 580); 

     $(".empreendimento .main-photo img").animate({ 
      marginLeft: "-" + limiteX 
     }, 5000, 'jswing').animate({ 
      marginTop: "-" + limiteY 
     }, 5000, 'jswing').animate({ 
      marginLeft: "0px" 
     }, 5000, 'jswing').animate({ 
      marginTop: "0px" 
     }, 5000, 'jswing'); 

    }); 
});

編輯

我已經找到了答案。剛剛加載圖像onLoad方法，工作得很好。

image = new Image(); 

image.onload = function() { 

    alturaFoto = $(".empreendimento .main-photo img").height(); 
    larguraFoto = $(".empreendimento .main-photo img").width(); 

    limiteY = Math.round(alturaFoto - 420); 
    limiteX = Math.round(larguraFoto - 580); 

    $(".empreendimento .main-photo img").animate({ 
     marginLeft: "-" + limiteX 
    }, 5000).animate({ 
     marginTop: "-" + limiteY 
    }, 5000).animate({ 
     marginLeft: "0px" 
    }, 5000).animate({ 
     marginTop: "0px" 
    }, 5000); 

} 

image.src = sourceFoto;

來源

2012-03-05 Lucas Veiga

您是否檢查過您在兩種瀏覽器中傳入animate方法的值是否相同？如果是這樣，也許這是一個jQuery錯誤。如果沒有，解決這個問題。 – 2012-03-05 15:04:39

在控制檯中是否有任何錯誤？ – danwellman 2012-03-05 15:04:47

你的控制檯中是否有錯誤？（在瀏覽器中點擊F12，然後瀏覽到頁面，在右下角看看是否有錯誤，如果有錯誤，請點擊通知，看看它是怎麼回事。） – JasCav 2012-03-05 15:05:18

您的$(document).load(sourceFoto, function(){})是罪魁禍首。您的sourceFoto包含一個URL，它是一個字符串，然後觸發jQuery Ajax load()方法。此負載將通過或失敗，並觸發回調。

jQuery load() event建議使用對象傳遞事件數據而不是字符串。

至於爲什麼它沒有在Chrome上執行它的奧祕，我可以冒險的可能性，你有這個代碼在<head>元素？如果有，那麼sourceFoto變量的值將爲undefined。 load()的第一個參數爲undefined，將觸發load() event，將事件處理函數（您的動畫函數）綁定到頁面的加載事件。

但是，這與ready() event不相同，當DOM被加載時觸發。我相信這是你想要的功能。 load() event改爲用於：

「...與URL關聯的任何元素：圖像，腳本，框架，iframe和窗口對象。」

來源

2012-03-05 16:12:20 Raintree

一切都太正確了，試着看看JSON風格，因爲這實際上是jQuery如何傳遞數據，如：{{key：'value'}'，並且至於Safari瀏覽器，我也沒有得到它，但safari和IE瀏覽器都以瘋狂的奇怪瀏覽器出現，並帶有奇怪的js插件。 chorome和ff通常是最好的js頁面，在我看來 – SpYk3HH 2012-03-05 16:14:22

@ SpYk3HH，你的評論沒有任何意義...... Chrome和Safari都是Webkit，這意味着它們都使用相同的JavaScriptCore。 – Sparky 2012-03-05 16:21:22

@ Sparky672 Webkit是它們兩者的佈局引擎。 Chrome和Safari有不同的JavaScript引擎。 ;） – Raintree 2012-03-05 16:24:48

jQuery Animate無法在Chrome上工作

回答

相關問題