JavaScript動畫調整div大小
[英]JavaScript animate resizing div
問題描述
我正在嘗試在頁面上放一個小動畫。 我並排有2個div，其中第二個div的內容通過Ajax調用，因此div的高度在不刷新頁面的情況下會有所不同。
<div id="number1" style="float:left; padding-bottom:140px">Static content, 200px or so</div>
<div id="number2" style="float:left">AJAX content here</div>
<div style="clear:left"></div>
<img src="image" margin-top:-140px" />
這基本上給了我2列的布局，並且無論高度如何，圖像都嵌套在左側列的下方。 都好！
但是，由於傳入的Ajax內容，頁面高度發生變化時，我想做的事情就是動畫圖像的過渡。 目前，圖像在上下左右晃動，我很想使其平滑地滑下頁面。
這可能嗎？ 我不是真的很喜歡我的JavaScript，所以我不確定該怎么做。 我在網站上使用的是jQuery庫，所以這可以作為前進的方向嗎？
3 個解決方案
解決方案1
6 已采納 2009-06-24 15:17:43
好的，我已經整理了一個非常快速和骯臟的示例。
這是HTML：
<body>
<a href="####" id="addContent">Add content</a>
<div id="outerContainer">
<div id="left" class="col">
<p>Static content</p>
<img src="images/innovation.gif" width="111px" height="20px">
</div>
<div id="right" class="col">
<p>Ajax content</p>
</div>
</div>
</body>
此處使用的jQuery
jQuery(function($){
var addedHTML = "<p class='added'>Lorem ipsum dolor sit amet, Nunc consectetur, magna quis auctor mattis, lorem neque lobortis massa, ac commodo massa sem sed nunc. Maecenas consequat consectetur dignissim. Aliquam placerat ullamcorper tristique. Sed cursus libero vel magna bibendum luctus. Nam eleifend volutpat neque, sed tincidunt odio blandit luctus. Morbi sit amet metus elit. Curabitur mollis rhoncus bibendum. Phasellus eget metus eget mi porttitor lacinia ac et augue. Nulla facilisi. Nam magna turpis, auctor vel vehicula vitae, tincidunt eget nisl. Duis posuere diam lacus.</p>";
$("#addContent").click(function(e){
$("#right").append(addedHTML);
var rightHeight = $("#right").height();
//Animate the left column to this height
$("#left").animate({
height: rightHeight
}, 1500);
});});
和CSS：
#outerContainer {
position: relative;
border: 1px solid red;
margin: 20px auto 0;
overflow: hidden;
width: 400px;}
.col {
width: 180px;
display: inline;
padding: 0 0 40px;}
#left {
float: left;
border: 1px solid cyan;
position: relative;}
#left img {
position: absolute;
bottom: 0;
left: 0;}
#right {
position: absolute;
top: 0;
left: 180px;
border: 1px solid green;}
#addContent {
text-align: center;
width: 100px;
margin: 20px auto 0;
display: block;}
我添加了一個按鈕，只是添加了一些“ Ajax”內容。 執行此操作時，它將獲取div的新高度並將其設置為動畫高度。 您可以為動畫添加一些緩動/更改速度以使其更加優美。
我希望這有幫助。
解決方案2
1 2009-06-24 10:13:07
也許您可以在內容div周圍使用一個容器（隱藏溢出），然后根據內容的高度調整該容器的大小，從而實現您要執行的操作？
解決方案3
0 2009-06-24 13:16:57
我同意以上答案。 您可以將圖像作為背景圖像應用到容器，然后對容器進行動畫處理。 這樣，背景圖像將隨容器一起向下移動（假設您將其錨定在底部！）
使用JavaScript調整div和背景的大小
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.