Question

我正在尝试在视图端口的底部创建一个横幅，该横幅在页面加载时从右侧（屏幕外）动画到中心。我正在测量窗户的高度并减去横幅的高度，以便通过静态定位将其放置在屏幕上正确的高度。然后我尝试将横幅中心设置为具有保证金自动的父母。

目前，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

你可以用非常少的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 */
}

Answer 2

您正在使用top等为您尝试定位的元素指定边距。切换到使用left并尝试使用$(document).ready(function(){或$(function(){来确保dom元素可用。

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

Fiddle

jQuery动画div为中心

2 个答案: