0

我在一个磁贴中有以下动画元素，它们（视觉上）在它们的 z 轴上旋转......它在下一页......

http://sthera.com/modelos.php

并且它是这样编码的（有点暴力，如果想到一个更优雅的解决方案，它也将不胜感激）......

$(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分类图像在哪里。

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

我认为问题可能与 $(document).ready... 运行时未加载的图像有关，因此我使用了另一个用户推荐的 imagesLoaded 插件...使用 JQuery 预加载图像以获得主色图像......虽然没有工作。图像加载后代码正在运行，但显然这不是问题。

（提前谢谢了。

4

1 回答 1

0

你console.log("animation starting3");在你的控制台中获得了吗？我想知道脚本是否正在运行。还有loc最终是什么？我看到您注释掉了警报，可能服务器的 url 结构与本地的不同，并且由于loc错误或为空而没有运行。

于 2014-06-23T11:33:22.817 回答