0
I ... 그것은 ... 페이지에서 (육안으로) 자신의 Z 축에 대한 회전 타일 내의 다음 애니메이션 원소 한jQuery를 애니메이션되지 원격
하고는 (더 우아한 용액이 또한 이해 될 것이다 떠오를 경우, 비트, 짐승 - 강제) 따라서 부호화 ... .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 ... 그래도 작동하지 않았습니다. 코드는 이미지가로드 된 후에 실행되지만 외관상으로는 문제가 아닙니다.(다수) 미리 감사드립니다.
'animate.js'대신'animate2.js'를 사용했습니다. 위에 게시 한 코드는'animate.js'에 있습니다. - 단지 관찰 일뿐입니다. – dunli
콘솔에'console.log ("animation started3");가 표시됩니까? 스크립트가 전혀 실행되고 있는지 궁금합니다. 또한 'loc'이 끝나는 이유는 무엇입니까? 나는 당신이 경보를 주석 처리 한 것을보고, 아마 서버의 URL 구조가 지역의 구조와 다르며'loc'가 잘못되었거나 비어 있기 때문에 아무것도 실행되지 않고있다. –
감사합니다 ... @dunli 내가 게시 한 코드는 animate.js에 있으며 코드는 매우 유사합니다. – JupiterPalace