jQuery div에 중심 맞추기

Question

페이지가로드 될 때 오른쪽 (오프 스크린)에서 가운데로 움직이는 뷰 포트의 하단에 배너를 만들려고합니다. 나는 윈도우의 높이를 측정하고 배너의 높이를 빼서 정적 인 위치와 함께 정확한 높이로 화면에 놓습니다. 나는 그 때 한계에 자동을 가진 부모에게 기치를 중심에 두는 것을 시도하고있다.

현재 jQuery가 작동하지 않는 것 같습니다.
Jsfiddle : 당신이 등, 최고를 사용하여 위치를 left를 사용하여 전환 및 DOM 요소를 사용할 수 있도록 $(document).ready(function(){하거나 $(function(){를 사용하려고 시도하고 요소에 http://jsfiddle.net/x8xtQ/3/

$(window).load(function() { 
var windowHeight = $(window).height(); 
var bannerHeight = windowHeight - 80 + "px"; 
$('.create_banner').css({ 
    position: "static", 
    top: bannerHeight 
}).animate({ 
    marginleft: "auto", 
    marginright: "auto" 
}); 
}); 

Answer 1

당신은 할당하고 마진.

$(function() { 
    var windowHeight = $(window).height(); 
    var bannerHeight = windowHeight - 80 + "px"; 
    $('.create_banner').css({ 
     top: bannerHeight 
    }).animate({ 
     left: 100 
    }); 
}); 

Fiddle

Answer 2

당신은 아주 아주 작은 자바 스크립트로 모든 것을 할 수 있습니다. 전환을 트리거하기 위해 클래스에 요소를 추가하기 만하면됩니다. 작은 애니메이션을하기 위해 CSS 전환을 사용하십시오. 정적 배치를 사용하는 이유를 알 수는 없습니다. 그것도 position의 기본값입니다.

내 예제에서 위치 지정 및 음수 왼쪽 여백을 통해 센터링이 수행됩니다. 요소를 left:50%에 배치 한 다음 요소 너비의 절반의 음수 여백을 배치하여 요소를 가운데에 맞 춥니 다. 이 경우에는 폭을 알고있는 경우에만 효과가 있습니다.

체크 아웃 내 접근 방식 : http://jsfiddle.net/x8xtQ/24/

화면에서 요소를 밀어 오프셋 값을 사용하면 애니메이션 타이밍에 영향을 미치는 것을 명심하세요!

가장 중요한 CSS 부분이 부분적으로 문제를 해결 않지만

.create_banner { 
    height: 80px; 
    width:920px; 
    z-index: 1200; 
    background-color:#000; 
    position:fixed; 
    bottom:0px; /* glue it to the bottom */ 
    left:5000px; /* any value outside of the screen */ 
    margin-left:-460px; /* width/2 = 920/2 */ 
    -webkit-transition:left 2s; /* tell the element to transition the left value*/ 
    -moz-transition:left 2s; 
    transition:left 2s; 
} 

.animate { 
    left:50%; /* where it should be afterwards */ 
}