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到中心

回答

相關問題