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上工作

回答

相关问题