0

したい：

  1. 「NEW」ボタンをクリックすると、新しいDIVが「CONTAINER」に追加されます-これは正常に機能します

  2. 「MOVE」ボタンをクリックします-$arrayを取ります-次にコンテナを適切な位置に移動します-次に$arrayの.eachアイテムに対して「CONTAINER」の新しい「DIV」を追加します-次に「CONTAINER」を「left：0」にアニメーション化します-これはしません動作しません

  3. 「削除」ボタンをクリックします-画面から「コンテナ」をアニメーション化し、「コンテナ」からすべてのDIVを削除します

  4. JsFiddleの例

  5. なぜそれがウェブ上で機能しないのですか？

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});
});
4

3 に答える 3

1

あなたが抱えている問題の 1 つは、元のブロックを に移動するときに、元のブロックの幅をカウントしていないことですleft:0。修正方法は次のとおりです。

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

以前は、それ自体の幅 * 配列の長さを超えて移動していました。これは、既に存在する幅が考慮されていないため、画面から押し出されたことを意味します。

しかし、私がそれを修正した後、divはちょっと積み重なっていきます。それらを水平に並べたいと思いますか？

于 2012-04-18T06:22:53.483 に答える
1

私が JavaScript をやったときはいつでも、DOM オブジェクトとイベント ハンドラーを宣言する順序が重要です。Web の例 (5 番目) では、jquery イベント処理 (クリックなど) は、それらの DOM オブジェクトが HTML で作成される前に設定されます。js スクリプトを、ページの下部の body タグの直前に移動してみてください。

于 2012-04-18T06:23:32.533 に答える
1

$(document).ready() 関数内にこれらすべての JavaScript を含める必要があります。

$(document).ready(function() {
   // put all your jQuery goodness in here.
 });
于 2012-04-18T06:28:34.813 に答える