使用show（「slow」）僅附加動畫文件

Question

在此代碼中：http://jsfiddle.net/GeAwB/，我想用jquery show（「slow」）爲最後添加的內容製作動畫。

我把新的內容在某些DIV new_div：

<div id="new_div" ></div> 

，並在主要的div添加這個 「香農」 -div：

  <div id="shanon" style="height: 300px;"></div> 

的問題IST，整個主DIV「 shanon「-div將會生成動畫，我只希望最後添加的行被動畫化。

有什麼想法嗎？

Answer 1

嘗試......

http://jsfiddle.net/GeAwB/6/

你應該換行的每一行有像我的例子中的元素，我包的每行有 div

然後，在JavaScript ..找到最後一個div元素。然後製作動畫....

$("#shanon").append($("#new_div").html()).find("div").last().hide().show("slow"); 

Answer 2

這裏還有一個可能性，即不惹你行間距：http://jsfiddle.net/GeAwB/18/

Answer 3

每次點擊按鈕，創建一個新的div，而不是試圖重用<div id="new_div"></div>

代碼將簡化頗大，並變得更容易跟蹤

$(document).ready(function() { 
    var $new_div, $shanon = $("#shanon"), 
     $weiter = $("#weiter"), 
     $zeile = $(".zeile"); 
    $weiter.removeAttr("disabled").click(function() { 
     if (i < array.length) { 
      if (i > 0) { 
       $zeile.removeClass("zeile"); 
      } 
      $new_div = $("<div/>").html(array[i]).hide().appendTo($shanon).show("slow"); 
      i = i + 1; 
     } 
     else { 
      $zeile.removeClass("zeile"); 
      $weiter.attr("disabled", "disabled"); 

     } 
    }); 
}); 

見update of fiddle

編輯：刪除zeile類是不完全正確的。需要將$('.zeile')放回到點擊處理程序中。儘管效率低下，但我不會因爲另一個答案被接受而做這個改變。