Question

我在瓷砖中有以下动画元素（在视觉上）在它们的z轴上旋转......它位于下一页......

并且它被编码（有点暴力强迫，如果想到一个更优雅的解决方案，也会受到赞赏）......

$(window).load(function () {
    imagesLoaded('.fixedWidth', function () {
        console.log("animation starting3");
        var locationClean = window.location.href.split('?')[0];
        var loc = locationClean.split('sthera/')[1];
        //alert (loc);

        if (loc == 'modelos.php' || loc == 'aislar.php') {

            //alert ("animation starting2");

            var duration = 300;
            var imgWidth = 123;
            var delayFactor = 60;
            var marginLeft = imgWidth / 2;
            //establecemos los valores de inicio
            $(".a1, .a2, .a3, .a4, .a5, .a6, .a7").css({
                'width': '0px',
                    'margin-left': marginLeft + 'px',
                    'opacity': '0'
            });
            $(".c1, .c2, .c3, .c4, .c5, .c6, .c7").css({
                'opacity': '0'
            });

            $(".a1").delay(1 * delayFactor).animate({
                'width': imgWidth + 'px',
                    'margin-left': '0px',
                    'opacity': '1'
            }, duration);
            $(".c1").delay(1 * delayFactor + duration).animate({
                'opacity': '1'
            }, duration);

            $(".a2").delay(2 * delayFactor).animate({
                'width': imgWidth + 'px',
                    'margin-left': '0px',
                    'opacity': '1'
            }, duration);
            $(".c2").delay(2 * delayFactor + duration).animate({
                'opacity': '1'
            }, duration);

            $(".a3").delay(3 * delayFactor).animate({
                'width': imgWidth + 'px',
                    'margin-left': '0px',
                    'opacity': '1'
            }, duration);
            $(".c3").delay(3 * delayFactor + duration).animate({
                'opacity': '1'
            }, duration);

            $(".a4").delay(4 * delayFactor).animate({
                'width': imgWidth + 'px',
                    'margin-left': '0px',
                    'opacity': '1'
            }, duration);
            $(".c4").delay(4 * delayFactor + duration).animate({
                'opacity': '1'
            }, duration);

            $(".a5").delay(5 * delayFactor).animate({
                'width': imgWidth + 'px',
                    'margin-left': '0px',
                    'opacity': '1'
            }, duration);
            $(".c5").delay(5 * delayFactor + duration).animate({
                'opacity': '1'
            }, duration);

            $(".a6").delay(6 * delayFactor).animate({
                'width': imgWidth + 'px',
                    'margin-left': '0px',
                    'opacity': '1'
            }, duration);
            $(".c6").delay(6 * delayFactor + duration).animate({
                'opacity': '1'
            }, duration);

            $(".a7").delay(7 * delayFactor).animate({
                'width': imgWidth + 'px',
                    'margin-left': '0px',
                    'opacity': '1'
            }, duration);
            $(".c7").delay(7 * delayFactor + duration).animate({
                'opacity': '1'
            }, duration);

        }

    });
}); //end animation()
//JavaScript Document

其中.a1 ... .a7是分类图像。

此代码在我的本地测试服务器中运行完美，但不能远程运行...

我认为问题可能与$（文件）.ready ...运行时没有加载的图像有关，所以我使用了另一个用户推荐的imagesLoaded插件... Preload images with JQuery to get dominant colour of image。 ..虽然没有工作。代码在图像加载后运行，但显然不是问题。

（很多）先谢谢。

Answer 1

您是否在控制台中获得了console.log("animation starting3");？我想知道脚本是否正在运行。 loc最终会是什么？我看到你注释了警报，也许服务器的url结构与本地结构不同，没有任何内容正在运行，因为loc错误或为空。

所选img上的jQuery动画在本地工作但不是远程工作

1 个答案: