隱藏和顯示的div的絕對位置的動畫和刪除它們隱藏

Question

我想：

1. 點擊「新建」按鈕添加新的DIV爲「容器」 - 這工作正常

2. 點擊「MOVE」按鈕 - 獲取$ array - 然後將容器移動到合適的位置 - 然後爲。$ array中的每個項目在「CONTAINER」中追加新的'DIV' - 然後將「CONTAINER」動畫爲「left」：0「 - 這不起作用

3. 點擊「REMOVE」按鈕 - 動畫「CONTAINE R」出畫面，並刪除所有div‘容器’

4. JsFiddle Example

5. 爲什麼它不web工作？

HTML

<div class="panel"> 
    <button class='new'> + </button> 
    <button class='move'> &gt; </button> 
    <button class='remove'> &lt; </button> 
</div> 
<div class="container"> 
</div> 

CSS

.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; 
} 

jQuery的：你有

$(".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($('<div class="block" id="new"><div class="head">HEADER</div><div class="body">text text text</div></div>', { 
      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('<div class="block" id="'+value+'"><div class="head">HEADER '+value+'</div><div class="body">text text text</div></div>', { 
         css: { 
          display: 'inline-block', 
          opacity: 0 
          } 
        }).animate({ opacity: 1 }); 
      }); 
    $('.container').animate({ left: 0}); 
}); 

Answer 1

的一個問題是，你是不計算原始塊時的寬度將它移動到left:0，這裏是一個修復：

var block_width = $(".block").width(); 
var array_width = (array_length * block_width) - block_width; 
$('.container').css ({ left: array_width}); 

之前，你動它在自身的寬×長度數組，這意味着它得到被推離屏幕，因爲它已經存在的寬度沒有想通的

但在我解決這個問題之後，divs只是堆積起來。我假設你希望他們排隊水平？

Answer 2

每當我完成javascript，你聲明DOM對象和事件處理程序的順序。在你的web例子中（第5號），你的jquery事件處理（點擊等）是在這些DOM對象甚至是用HTML創建之前設置的。嘗試將您的js腳本移動到尾部標籤之前的頁面底部。

Answer 3

你應該有$（文件）。就緒裏面所有的JavaScript（）函數：

$(document).ready(function() { 
    // put all your jQuery goodness in here. 
});