애니메이션이 결과와 일치하지 않습니다. Jquery

Question

일관되게 동작하지 않는 jQuery로 디자인 된 인덱스 페이지 애니메이션이 있습니다 (모든 조각은 논리적 인 방식으로 중앙에 위치해야합니다). http://cspsolutions.ca/Maxxim에서 볼 수 있습니다. 몇 번 새로 고침하면 Google 크롬의 동일한 지점에서 일관되게 끝나지 않지만 다른 모든 브라우저에서 제대로 작동한다는 것을 알 수 있습니다. 크롬에서이 문제를 보려면 페이지를 몇 번 새로 고쳐야합니다. 어떤 도움이라도 대단히 감사 드리며 .js 파일에 대한 코드는 다음과 같습니다.

// JavaScript Document 

$(document).ready(function() { 

$(".intro-no-js").css("visibility","hidden"); 
$(".intro-javascript").css("visibility","visible"); 

//defines how max should be animated 
jQuery.fn.maxanimate = function() { 
this.css("position","absolute"); 

    var t = (($(window).height() - this.outerHeight())/2) + $(window).scrollTop(); 

    var l = (($(window).width() - this.outerWidth())/2) + $(window).scrollLeft(); 

    $(this).animate({ 
     top: t, 
     left: l-79.5 
    }, 1000); 

    return this; 
} 


//defines how xim should be animated 
jQuery.fn.ximanimate = function() { 
this.css("position","absolute"); 

    var t = (($(window).height() - this.outerHeight())/2) + $(window).scrollTop(); 

    var r = (($(window).width() - this.outerWidth())/2) + $(window).scrollLeft(); 

    $(this).animate({ 
     top: t, 
     left: r+78.5 
    }, 1000); 

    return this; 
} 

//defines how top arrows should be animated 
jQuery.fn.arrowsanimate = function() { 
this.css("position","absolute"); 

    var t = (($(window).height() - this.outerHeight())/2) + $(window).scrollTop(); 
    var l = (($(window).width() - this.outerWidth())/2) + $(window).scrollLeft(); 

    $(this).animate({ 
     top: t-25, 
     left: l 
    }, 1000); 

    return this; 
} 

//defines how bottom section should be animated 
jQuery.fn.animatebottom = function() { 
this.css("position","absolute"); 

    var b = (($(window).height() - this.outerHeight())/2) + $(window).scrollTop(); 
    var l = (($(window).width() - this.outerWidth())/2) + $(window).scrollLeft(); 

    $(this).animate({ 
     bottom: b-27, 
     left: l 
    }, 1000); 

    return this; 
} 

//max starting co-ordinates 
var maxl = $(window).width() - 157; 
var maxt = ($(window).height() - $("#intro-max").outerHeight())/2; 

//xim starting co-ordinates 
var ximr = $(window).width() - 159; 
var ximt = ($(window).height() - $("#intro-xim").outerHeight())/2; 

//arrows starting co-ordinates 
var al = (($(window).width() - $("#intro-xim").outerWidth())/2) + $(window).scrollLeft()+ 35; 
var at = 0; 

//bottom of logo starting co-ordinates 
var bl = (($(window).width() - $("#intro-xim").outerWidth())/2) + $(window).scrollLeft()-90; 
var bt = 0; 

//set initial co-ordinates for all divs 
$("#intro-arrows").css({position: "absolute",top: at,left: al});  
$("#intro-max").css({position: "absolute",top: maxt,right: maxl}); 
$("#intro-xim").css({position: "absolute",top: ximt,left: ximr}); 
$(".intro-bottom").css({position: "absolute", bottom: bt, left: bl}); 

//lets bring it all to life! 
$("#intro-max").maxanimate(); 
$("#intro-xim").ximanimate(); 
$("#intro-arrows").arrowsanimate(); 
$(".intro-bottom").animatebottom(); 

//refresh window if resized 
$(window).bind('resize',function(){ 
window.location.href = window.location.href; 
}); 


$("#sales").click(function() { 
    window.location.href = "main.html?page=1&sel=1"; 
}); 


$("#design").click(function() { 
    window.location.href = "main.html?page=2&sel=1"; 
    return false;//Just in case if it is a link prevent default behavior 
}); 


}); 

Answer 1

문제는 자바 스크립트가 처음 실행, 실제로 아직 실제 너비 또는 높이가없는, 따라서 브라우저에서 렌더링되지 않은 때 요소의 DOM에 존재 그들이 동안이다. 페이지로드시 0을 잘못 반환하는 outerWidth 및 outerHeight을 사용하므로 게재 위치가 꺼져 있습니다.

이 문제를 해결하는 가장 쉬운 방법은 $(document).ready에서 초기 애니메이션을 호출하는 것이 아니라 $(window).load에서 요소를 렌더링하고 이미지를 다운로드 한 후에 실행하는 것입니다.