JavaScript動畫調整div

我試圖在頁面上放一個小動畫。我有兩個並排的div，第二個div的內容是通過Ajax調用的，因此div高度會隨着頁面刷新而變化。JavaScript動畫調整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庫，那麼這可能是一種前進的方式嗎？

來源

2009-06-24 MrFidge

好吧，我剛纔把一個非常快速和骯髒的例子放在一起。

這裏的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;}

我添加了一個按鈕即可添加一些 '阿賈克斯' 內容。當你這樣做的時候，它抓住了div的新高度和動畫到這個高度。你可以添加一些緩動到動畫/改變速度，使其更加精美一點。

我希望這會有所幫助。

來源

2009-06-24 15:17:43 Nooshu

您可以通過將代碼放在http://jsbin.com上，然後鏈接到已保存的公共URL – 2009-06-24 15:19:10

也許你可以在內容div（溢出隱藏）周圍使用容器，並根據內容的高度調整大小，從而實現你想要做的事情？

來源

2009-06-24 10:13:07

好的，但我怎麼去動畫調整大小，這是我真的需要了解的東西。 – MrFidge 2009-06-24 14:11:45

我同意上面的答案。您可以將圖像作爲背景圖像應用於容器，然後爲容器設置動畫。這樣背景圖片會隨着容器向下移動（假設你將它錨定到底部！）

來源

2009-06-24 13:16:57 Nooshu

嗯，我應該更具體 - 我已經把代碼放在這裏顯示一個圖像，但有時它需要是一個Flash文件，所以不能使用background：url（）屬性。 – MrFidge 2009-06-24 14:12:26

JavaScript動畫調整div

回答

相關問題