Анимация не соответствует результатам Jquery

Question

У меня есть анимация страницы индекса, которую я разработал с помощью jQuery, которая не всегда ведет себя одинаково (все фрагменты должны быть центрированы логическим образом).Его можно посмотреть на http://cspsolutions.ca/Maxxim.Если вы обновите его пару раз, вы увидите, что он не всегда заканчивается в одном и том же месте в Google Chrome, но работает правильно во всех других браузерах.Чтобы увидеть эту проблему в Chrome, страницу необходимо обновить несколько раз.Любая помощь будет принята с благодарностью, и код приведен ниже для файла .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 при первоначальном запуске javascript, на самом деле не отображались в браузере и, следовательно, еще не имеют фактической ширины или высоты. Место размещения отключено, поскольку вы используете outerWidth и outerHeight, которые неправильно возвращают 0 при загрузке страницы.

Простой способ обойти это - не вызывать начальные анимации на $(document).ready, а вместо этого на $(window).load, который срабатывает после визуализации элементов и загрузки изображений.