在jQuery中滑动水平div

我想要制作一个滑动div模块，它由包装div的左右两侧的'left'和'right'按钮控制，但是我在计算出最好的这样做的方式。在jQuery中滑动水平div

该模块的HTML结构如下所示：

<div class="wrapper"> 
       <div class="scrollLeft"> 
        <span>Left</span> 
       </div> 
       <div class="scrollingDivs"> 
        <div class="scrollThis">Some content</div> 
        <div class="scrollThis">different content</div> 
        <div class="scrollThis">more content</div> 
        <div class="scrollThis">even more content</div> 
        <div class="scrollThis">and more content</div> 
       </div> 
       <div class="scrollRight"> 
        <span>Right</span> 
       </div> 
      </div>

相应的CSS是这样的：

.wrapper{ 
width: 720px; 
float: left; 
height: 146px; 
position: relative; 
} 
.scrollLeft, .scrollRight{ 
display: inline-block; 
width: 20px; 
height: 130px; 
text-indent: -99999px; 
cursor: pointer; 
} 
.scrollLeft{ 
background: url('../img/left.png') no-repeat; 
float: left; 
margin-right: 16px; 
} 
.scrollRight{ 
background: url('../img/right.png') no-repeat; 
float: right; 
} 
.scrollLeft:hover{ 
background: url('../img/left-hl.png') no-repeat; 
} 
.scrollRight:hover{ 
background: url('../img/right-hl.png') no-repeat; 
} 
.scrollingDivs{ 
width: 672px; 
margin-left: 28px; 
position: absolute; 
margin-top: 5px; 
overflow: hidden; 
height: 146px; 
} 
.scrollThis{ 
display: inline-block; 
background: #fff; 
border: 1px solid rgba(65,65,66,0.3); 
border-top: 0; 
border-bottom: 0; 
width: 160px; 
height: 140px; 
padding-left: 5px; 
padding-right: 5px; 
padding-top: 3px; 
padding-bottom: 3px; 
margin-right: 0; 
margin-left: -8px; 
line-height: 16px; 
left: 0; 
}

还有更多的有点，但是这是它的基本精神。

所以当scrollLeft被点击的时候，scrollThis div应该稍微透明一些并且移动到左边 - 第一个应该不见了，右边的那个应该可以看到。理想情况下，我还要检查一下，如果滚动的div在任何一端都会发生另一种效果（也许scrollLeft箭头发光或某物）。

所以我开始在这个JQuery上，但遇到了一个早期的问题，如何让他们移动。由于这是所有设置的方式，用left = 50做动画似乎不起作用。这就是我迄今为止所拥有的，尽管现在它至多还不完善。这只是在'点击左'部分进行测试。

<script> 
$(document).ready(function(){ 
    $('.scrollLeft').click(function(){ 
     $('.scrollThis').animate({ 
      opacity: '0.25', 
      left: '-=50' 
      }, 500, 'linear', function(){});  
     }); 
    }); 
    </script>

在我的测试会发生什么事是，透明度会褪色的，是的，以及申报单都会收到 - = 50向左财产，但他们不会移动。我应该如何更好地构建JS或CSS来获得期望的效果？

谢谢

来源

2012-10-19 Yair

首先，这个：text-indent：-99999px;隐藏可点击的跨度。请制作一个jsFiddle。 –

是的，我知道 - 大多数情况下只是让div始终显示的填充符。我会尽力在以后制作一个jsFiddle .. – Yair