jQuery animation on selected img working locally but not remotely

Question

I have the following animated elements in a tile that (visually) rotate on their z-axis... it is on the following page...

http://sthera.com/modelos.php

and it is coded thus (a bit brute-forced, if a more elegant solution come to mind it would also be appreciated)...

$(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

where .a1 ... .a7 are classed images.

This code runs perfectly in my local test server but not remotely...

I thought the problem might have something to do with the images not being loaded by the time $(document).ready... ran so I used the imagesLoaded plugin recommended by another user... Preload images with JQuery to get dominant colour of image ... didn´t work though. The code is being run after the images load but apparently that wasn't the issue.

(many) Thanks in advance.

I just noticed, you used `animate2.js` instead of `animate.js`. The code you've posted above is on `animate.js`. - just an observation. — dunli, Jun 23 '14 at 00:32
Are you getting the `console.log("animation starting3");` in your console? I'm wondering if the script is running at all. Also what does `loc` end up being? I see you commented out the alert, maybe the server's url structure is different from the local one and nothing is running because `loc` is wrong or empty. — Adam Merrifield, Jun 23 '14 at 01:17
Thanks... @dunli the code I posted is in animate.js, the codes are very similar... — JupiterPalace, Jun 23 '14 at 04:59
@JupiterPalace I've added my comment as an answer so you can accept it and the question could be closed. Also, you're welcome. — Adam Merrifield, Jun 23 '14 at 11:33

score 0 · Answer 1 · answered Jun 23 '14 at 11:33

Are you getting the console.log("animation starting3"); in your console? I'm wondering if the script is running at all. Also what does loc end up being? I see you commented out the alert, maybe the server's url structure is different from the local one and nothing is running because loc is wrong or empty.

jQuery animation on selected img working locally but not remotely

1 Answers1