У меня есть динамический макет с этой структурой.С этой структурой мне нужно сдвинуть элементы в группы влево или вправо.ZtsWorkSpaceBar будет элементом контейнера, по которому я хочу скользить.ztsWorkSpaceBarCenter - это основной контейнер, в котором они все находятся.Проблема в том, что может быть один или 100 ztsWorkSpaceBars, так как я сказал, что он динамический, поэтому мой код должен это отражать.Я пробовал несколько вещей, большинство из которых не дают никакого эффекта, или неправильный эффект ...
<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);});