アニメーションが結果と一貫しないJquery

Question

私はjQueryを使って設計したインデックスページアニメーションを持っています。これは常に同じように動作しません（すべてのピースは論理的に中央に配置する必要があります）。それはhttp://cspsolutions.ca/Maxximで見ることができます。あなたがそれを数回リフレッシュすると、それは一貫してGoogle 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

問題ではJavaScriptが最初に実行されたとき、彼らはDOMに存在しないながら要素は、実際のブラウザでレンダリングされていないので、まだ実際の幅や高さを持っていないこと。ありますページの読み込みに0を誤って返すouterWidthとouterHeightを使用しているため、プレースメントがオフになっています。

これを回避する簡単な方法は、最初のアニメーションを$(document).readyで呼び出すのではなく、要素がレンダリングされてイメージがダウンロードされた後に起動するに呼び出すことです。