Question

我在谷歌Chrome浏览器上遇到了一些问题。我的代码与Safari的效果相当不错，这让我觉得它应该适用于Google Chrome。但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;

Answer 1

你的$(document).load(sourceFoto, function(){})是罪魁祸首。您的sourceFoto包含一个URL，它是一个字符串，然后触发jQuery Ajax load()方法。此加载将通过或失败，并触发回调。

jQuery load() event建议使用对象传递事件数据而不是字符串。

至于为什么它没有在Chrome上执行的谜团，我是否可能冒险在<head>元素中使用此代码？如果您在那里，sourceFoto变量的值将为undefined。将load()的第一个参数设为undefined，将触发load() event，将事件处理程序（您的动画函数）绑定到页面的加载事件。

但是，这与加载DOM时触发的ready() event不同。我相信这是你想要的功能。而load() event则用于：

“...与网址相关联的任何元素：图片，脚本，框架，iframe和窗口对象。”

jQuery Animate不能在Chrome上运行

1 个答案: