在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