숨기기 및 표시 div의 & I가 원하는 숨기기

Question

에 제거 : "새로운"버튼을

1. 클릭하면 "컨테이너"에 대한 새로운 DIV를 추가 -이 잘

를 작동

2. $ MOVE 버튼을 클릭하고 $ array를 취한 다음 컨테이너를 좋은 위치로 이동 한 다음 $ array에있는 각 항목에 대해 "CONTAINER"에 새 'DIV'를 추가 한 다음 'CONTAINER'를 왼쪽으로 0으로 애니메이션합니다. - 작동하지 않습니다.

3. "제거"버튼을 클릭하십시오 - "CONTAINE R

4. JsFiddle Example

5. 이 왜 web에서 작동하지 않습니다 CONTAINER ""화면 밖으로, 그리고 모든있는 div 제거 "?

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

내가 자바 스크립트를 수행 할 때마다 DOM 객체 및 이벤트 처리기를 선언하는 순서가 중요합니다. 웹 예제 (5 번)에서 jquery 이벤트 처리 (클릭 등)는 DOM 객체가 HTML로 작성되기 전에 설정됩니다. js 스크립트를 마지막 body 태그 바로 앞에있는 페이지의 맨 아래로 옮겨보십시오.

Answer 3

당신은() 함수 $ (문서) .ready 내 모든 자바 스크립트가 있어야합니다.

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