0
이 구조로 동적 레이아웃이 있습니다. 이 구조를 사용하면 항목을 왼쪽 또는 오른쪽으로 그룹으로 슬라이드해야합니다. ztsWorkSpaceBar는 슬라이드하려는 컨테이너 요소입니다. ztsWorkSpaceBarCenter는이 모든 것이 상주하는 주요 컨테이너입니다. 문제는 하나 또는 100 개의 ztsWorkSpaceBars가있을 수 있다는 것인데, 내 코드가이를 반영해야한다는 점에서 동적이라고 말했습니다. 필자가이 나의 마지막 시도를 작성하는 시간에 아무런 영향, 또는 잘못된 효과를 얻을 수없는 대부분의 몇 가지 ...jQuery이 잘못 시도한 것처럼 보입니다. 하나의 중앙 컨테이너 내에 여러 개의 동적 요소를 왼쪽 또는 오른쪽으로 밀어 넣으 려합니다.
<div id="ztsWorkspaceBarCenter">
<div class="ztsWorkSpaceBar">
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="0" class="ztsWorkSpaceItem">0</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="1" class="ztsWorkSpaceItem">1</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="2" class="ztsWorkSpaceItem">2</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="3" class="ztsWorkSpaceItem">3</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="4" class="ztsWorkSpaceItem">4</div>
</div>
<div class="ztsWorkSpaceBar">
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="5" class="ztsWorkSpaceItem">5</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="6" class="ztsWorkSpaceItem">6</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="7" class="ztsWorkSpaceItem">7</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="8" class="ztsWorkSpaceItem">8</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="9" class="ztsWorkSpaceItem">9</div>
</div>
<div class="ztsWorkSpaceBar">
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="10" class="ztsWorkSpaceItem">10</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="11" class="ztsWorkSpaceItem">11</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="12" class="ztsWorkSpaceItem">12</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="13" class="ztsWorkSpaceItem">13</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="14" class="ztsWorkSpaceItem">14</div>
</div>
<div class="ztsWorkSpaceBar">
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="15" class="ztsWorkSpaceItem">15</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="16" class="ztsWorkSpaceItem">16</div>
<div style="width: 114px; height: 33px; border: 1px solid rgb(0, 0, 0); float: left;" rel="17" class="ztsWorkSpaceItem">17</div>
</div>
</div>
을 시도 여유를 가지고 있었다 +/-하지만이 왼쪽 시도, 폭 등 아무것도 제대로 작동하지 않는 것 같습니다. 나는 전체 컨테이너가 왼쪽이나 오른쪽으로 유창하게 원활하게 움직이기를 바랄뿐입니다. 다음 콘테이너가 그 안에 들어갈 곳은 슬라이더 효과와 같습니다.
$('#ztsWorkspaceBarLeft').click(function(){console.log('left');$('#ztsWorkspaceBarCenter').find('.ztsWorkSpaceBar').filter(':visible:first').animate({margin: -580+'px'}, 900);});
$('#ztsWorkspaceBarRight').click(function(){console.log('right');$('#ztsWorkspaceBarCenter').find('.ztsWorkSpaceBar').filter(':hidden:last').animate({margin: 580+'px'}, 900);});