非表示と表示のdivをクリック上の絶対位置のアニメーションで＆ハイド

Question

にそれらを削除し、私がしたい：「NEW」ボタンを

1. クリックは、「コンテナ」に新しいDIVを追加する - これは細かい

の作品

2. $ MOVEボタンをクリックして$ arrayを取り出し、次にコンテナを適切な位置に移動し、$ array内の各項目に対して "CONTAINER"に新しい 'DIV'を追加してからCONTAINERを左にアニメーション化します。 - これは動作しません。

3. 「削除」ボタンをクリックすると、「CONTAINE 「画面のうち、およびからすべてのdivを削除し、 "R CONTAINER"

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

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番）では、DOMオブジェクトがHTMLで作成される前にjqueryイベント処理（clickなど）が設定されています。 jsスクリプトを最後のbodyタグの直前に移動してみてください。

Answer 3

あなたは$（ドキュメント）.ready（）関数内のすべてのものをJavaScriptの持っている必要があります（」。コンテナ '）

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