jQuery动画div到中心

我试图在视图端口的底部创建一个横幅，从页面加载时，从右边（离屏）动画到中心。我正在测量窗口的高度，并减去横幅的高度，将其放置在正确高度的屏幕上并进行静态定位。然后，我试图用横幅自动将横幅集中到父母身上。jQuery动画div到中心

目前，没有一个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" 
}); 
});

来源

2014-02-06 user2126833

你分配利润率您尝试使用顶部位置等切换为使用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

来源

2014-02-06 19:46:09 helion3

虽然这并部分地解决这个问题，关键是要居中的div，这不能用静态值来完成。这就是我最初使用margin auto的原因。 – user2126833

为什么不呢？你可以计算'window.width'，减去你动画的div的宽度，然后除以2.这就是你的新'left'。例如：每边需要800px窗口 - 400px div = 200px/2 = 100px空间。 – helion3

你可以做的一切，非常非常小的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 */ 
}

来源

2014-02-06 19:59:39 markusthoemmes

jQuery动画div到中心

回答

相关问题