tags:

views:

74

answers:

1

I am appending new data - $('#posts').append(data);
But I want this new data to .slideToggle() while appending.

How can it be done?

+1  A: 

You can do it if you have a single containing element.

$("<div>").append(data).hide().appendTo("#posts").slideDown();

Let me give you an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
var content = '<p>four</p><p>five</p><p>six</p>';
$(function() {
  $("#add").click(function() {
    $("<div>").append(content).hide().appendTo("#container").slideDown(1000, function() {
      $(this).contents().unwrap();
    });
  });
});
</script>
<style type="text/css">
div, p { padding: 0; margin: 0; border: 0 none; }
#container { background: yellow; border: 1px solid black; }
</style>
</head>
<body>
<div id="container">
<p>one</p>
<p>two</p>
<p>three</p>
</div>
<input id="add" type="button" value="Add Content">
</body>
</html>

Here the content is not one block, it's three (paragraphs). If it was one block you wouldn't need to wrap it like this.

cletus
but it is not singe. There ares some posts in it already, and several new may be added sequentially.
Qiao