title: jQuery appendTo DIV and then animate
body: <p>When I clik on the button "new" start jQuery action:</p>
  
  <p>1.) create DIV and addClass "block" to the DIV</p>
  
  <p>2.) appendTo ".container"</p>
  
  <p>3.) animate this DIV in container from opacity 0 to 1</p>
  
  <p><a href="http://jsfiddle.net/ynternet/bckHD/" rel="nofollow">JsFiddle Example</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="panel"&gt;
     &lt;button class='new'&gt; + &lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.block {
     margin: 0px;
     width: 200px;
     display: inline-block;
     border-right:thin dashed #aaa;
     opacity: 0;
  }
  .panel {
     position: absolute;
     top: 100px;
     padding: 5px;
     color: #FFF;
     font-size: 15px;
     background: #d30;
     height: 30px;
     cursor:pointer;
  }
  .container {
     position: absolute;
     top: 145px;
     left: 0px;
  }
  button{
     font-size: 20px;
     padding: 0px;
  }
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>function createChatBox(title) {
     $(" &lt;div /&gt;" ).attr("id","block_"+title)
      .addClass("block")
      .html('&lt;div class="title"&gt;text1 '+title+'&lt;/div&gt;')
      .appendTo($( ".container" , {
          css: {
              display: 'inline-block',
              opacity: 0
          }
      }).animate({ opacity: 1  }) );
  }
  
  $(".new").click(function(){
       createChatBox('text2');
   });
  </code></pre>