title: Hide and show divs on click with animation of absolute position & remove them on hide
body: <p>I want to:</p>
  
  <ol>
  <li><p>click on the "NEW" button adds new DIV into "CONTAINER" - this works fine</p></li>
  <li><p>click on the "MOVE" button - take $array - then move container to good position - then for .each item in $array append new 'DIV' in "CONTAINER" - then animate "CONTAINER to "left: 0" - this doesn't work</p></li>
  <li><p>click on the "REMOVE" button - animate "CONTAINER" out of screen, and remove all DIVs from "CONTAINER"</p></li>
  <li><p><a href="http://jsfiddle.net/ynternet/vykV9/" rel="nofollow noreferrer">JsFiddle Example</a></p></li>
  <li><p>Why it does not work on <a href="http://ynternet.sk/test2/4/" rel="nofollow noreferrer">web</a>?</p></li>
  </ol>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="panel"&gt;
      &lt;button class='new'&gt; + &lt;/button&gt;
      &lt;button class='move'&gt; &amp;gt; &lt;/button&gt;
      &lt;button class='remove'&gt; &amp;lt; &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;
  }
  .head {
     margin : 0px;
     padding: 5px;
     height : 30px;
     background-color: red;
     color  : white;
  }
  .body {
     margin : 0px;
     padding: 5px;
     height : 190px;
     background-color: #ddd;
     color  : black;
  }
  .panel {
     position  : absolute;
     top       : 50px;
     padding   : 5px;
     color     : #FFF;
     font-size : 15px;
     background: #d30;
     height    : 25px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
     cursor    : pointer;
  }
  .container {
     position: absolute;
     top  : 90px;
     left : 0px;
  }
  button{
     width   : 25px;
     background  : none;
     cursor      : pointer;
     font-family : 'voltaeftu-regular',Times New Roman;
     font-size   : 18px;
     color   : #fff;
     border  : none;
     margin  : 0px;
     padding : 0px;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(".remove").click(function(){
      var x_width = $('.container').find('.block').width();
      var x_all = $('.container').find('.block').size();
      var all_width = -10 - ( x_width * x_all ) ;
      $(".container").animate({
          left: all_width
      }, 500 );
   });
  
  $(".new").click(function()  {
         $('.container').append( $('&lt;div class="block" id="new"&gt;&lt;div class="head"&gt;HEADER&lt;/div&gt;&lt;div class="body"&gt;text text text&lt;/div&gt;&lt;/div&gt;', {
             css: {
                 display: 'inline-block',
                 opacity: 0
             }
         }).animate({ opacity: 1  }) );
  });
  
  // array
  var $array = [ '001', '002', '003', '004', '005' ];
  
  $(".move").click(function(){
     var array_length = $array.length;
     var array_width = 0 - array_length * 200;
     $('.container').css ({ left: array_width});
     $.each( $array , function(item, value){
                 $('.container').apped('&lt;div class="block" id="'+value+'"&gt;&lt;div  class="head"&gt;HEADER '+value+'&lt;/div&gt;&lt;div class="body"&gt;text text  text&lt;/div&gt;&lt;/div&gt;', {
                         css: {
                             display: 'inline-block',
                             opacity: 0
                             }
                     }).animate({ opacity: 1  });
             });
      $('.container').animate({ left: 0});
  });
  </code></pre>