2014-06-23 2 views
0

I ... 그것은 ... 페이지에서 (육안으로) 자신의 Z 축에 대한 회전 타일 내의 다음 애니메이션 원소 한jQuery를 애니메이션되지 원격

http://sthera.com/modelos.php

하고는 (더 우아한 용액이 또한 이해 될 것이다 떠오를 경우, 비트, 짐승 - 강제) 따라서 부호화 ... .a1 ... .a7을 분류 한 이미지들이다

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

.

이 코드 내 로컬 테스트 서버에서 완벽하게 실행하지만 원격으로 ...

나는 문제가 .ready 시간 $ (문서)에 의해로드되지 않는 이미지를 함께 할 수있는 뭔가가있을 수 있습니다 생각 ... 그래서 다른 사용자가 추천 한 imagesLoaded 플러그인을 사용했습니다 ... Preload images with JQuery to get dominant colour of image ... 그래도 작동하지 않았습니다. 코드는 이미지가로드 된 후에 실행되지만 외관상으로는 문제가 아닙니다.

(다수) 미리 감사드립니다.

+0

'animate.js'대신'animate2.js'를 사용했습니다. 위에 게시 한 코드는'animate.js'에 있습니다. - 단지 관찰 일뿐입니다. – dunli

+0

콘솔에'console.log ("animation started3");가 표시됩니까? 스크립트가 전혀 실행되고 있는지 궁금합니다. 또한 'loc'이 끝나는 이유는 무엇입니까? 나는 당신이 경보를 주석 처리 한 것을보고, 아마 서버의 URL 구조가 지역의 구조와 다르며'loc'가 잘못되었거나 비어 있기 때문에 아무것도 실행되지 않고있다. –

+0

감사합니다 ... @dunli 내가 게시 한 코드는 animate.js에 있으며 코드는 매우 유사합니다. – JupiterPalace

답변

0

콘솔에 console.log("animation starting3");이 표시됩니까? 스크립트가 전혀 실행되고 있는지 궁금합니다. 또한 loc 결국 무엇입니까? 나는 당신이 경보를 주석 처리 한 것을보고, 서버의 URL 구조가 로컬 구조와 다르며 loc이 잘못되었거나 아무것도 없으므로 아무 것도 실행되지 않았을 수도 있습니다.

관련 문제