jQuery анимация div в центр

Question

Я пытаюсь создать баннер в нижней части порта представления, который анимируется справа (за кадром) в центр, когда страница загружается. Я измеряю высоту окна и вычитаю высоту баннера, чтобы поместить его на экран на правильной высоте со статическим позиционированием. Затем я пытаюсь центрировать баннер на родителя с маркой auto.

В настоящее время ни один из jQuery не работает.
Jsfiddle: 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

вы присваиваете поля к элементу вы пытаетесь позиционировать с помощью верхней и т.д. Переключиться на использование left и попытаться использовать $(document).ready(function(){ или просто $(function(){ для того чтобы обеспечить РОМ элементы доступны.

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

Fiddle

Answer 2

Вы можете делать все, что с очень очень мало JavaScript. Вам просто нужно добавить класс в элемент, чтобы вызвать переход. Просто используйте 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 */ 
}