如何添加動畫效果左右滾動按鈕單擊？

我是jQuery中的新成員，它包含了這個問題。在我的document.ready函數中，當我在鏈接上應用的點擊事件發生時，.animate（）效果不起作用，因此它不會左右滾動。任何人都可以告訴我這是什麼錯誤，這樣它會左右滾動。如何添加動畫效果左右滾動按鈕單擊？

<html> 
<head> 
<style type="text/css"> 
ul.images 
{ 
    padding:0px; 
    margin:0px; 
    white-space: nowrap; 
    width:auto; 
    overflow:hidden; 
} 

ul.images li 
{ 
    line-height:200px; 
    display: inline; 

} 


</style> 

<script type="text/javascript" src="jquery-1.7.2.js"></script> 

<script language="javascript"> 
var totalWidth; 
$(document).ready(function(){ 
     $("a.abc").click(function() { 
      $("#scroller").animate({"scrollLeft":"-=204"},"slow"); 
      return false; 
     }); 
     $("a.def").click(function() { 
      $("#scroller").animate({"scrollRight":"+=204"},"slow"); 
      return false; 
     }); 
}); 

</script> 

</head> 
<body> 
<div style="width:1450px"> 
    <div style="float:left;"> 
     <a class="abc" href="javascript: void(0);" style="display:table-cell;height:155px;vertical-align:middle"><img src="backward.png" height="50" width="50"/></a> 
    </div> 

     <div style="width:1220px;float:left"> 
      <ul class="images" id="scroller"> 
       <li class="list"><img src="Tulips.jpg" class="image" alt="anuj" width="200"/></li> 
       <li class="list"><img src="Penguins.jpg" class="image" alt="anuj" width="200"/></li> 
       <li class="list"><img src="Tulips.jpg" class="image" alt="anuj" width="200"/></li> 
       <li class="list"><img src="Penguins.jpg" class="image" alt="anuj" width="200"/></li> 
       <li class="list"><img src="Tulips.jpg" class="image" alt="anuj" width="200"/></li> 
       <li class="list"><img src="Penguins.jpg" class="image" alt="anuj" width="200"/></li> 
       <li class="list"><img src="Tulips.jpg" class="image" alt="anuj" width="200"/></li> 
       <li class="list"><img src="Penguins.jpg" class="image" alt="anuj" width="200"/></li> 
       <li class="list"><img src="Tulips.jpg" class="image" alt="anuj" width="200"/></li> 
       <li class="list"><img src="Penguins.jpg" class="image" alt="anuj" width="200"/></li> 
       <li class="list"><img src="Tulips.jpg" class="image" alt="anuj" width="200"/></li> 
       <li class="list"><img src="Penguins.jpg" class="image" alt="anuj" width="200"/></li> 
       <li class="list"><img src="Tulips.jpg" class="image" alt="anuj" width="200"/></li> 
       <li class="list"><img src="Penguins.jpg" class="image" alt="anuj" width="200"/></li> 
       <li class="list"><img src="Tulips.jpg" class="image" alt="anuj" width="200"/></li> 
       <li class="list"><img src="Penguins.jpg" class="image" alt="anuj" width="200"/></li> 
       <li class="list"><img src="Tulips.jpg" class="image" alt="anuj" width="200"/></li> 
       <li class="list"><img src="Penguins.jpg" class="image" alt="anuj" width="200"/></li> 
       <li class="list"><img src="Tulips.jpg" class="image" alt="anuj" width="200"/></li> 
       <li class="list"><img src="Penguins.jpg" class="image" alt="anuj" width="200"/></li>  
      </ul> 
     </div> 

    <div style="float:left;"> 
     <a class="def" href="javascript: void(0);" style="display:table-cell;height:155px;vertical-align:middle;"><img src="forward.png" height="50" width="50"/></a> 
    </div> 
</div> 
</body> 
</html>

來源

2012-05-31 Anuj Jain

試試這個：

<div style="width:1050px"> 
<div style="float:left;"> 
    <a class="abc" href="javascript: void(0);" style="display:table-cell;height:155px;vertical-align:middle">PREV</a> 
</div> 

    <div style="width:1220px;float:left"> 
     <ul class="images" id="scroller"> 
      <li class="list"><img src="http://placehold.it/350&text=TEST1" class="image" alt="anuj" width="200"/></li> 
      <li class="list"><img src="http://placehold.it/350&text=TEST2" class="image" alt="anuj" width="200"/></li> 
      <li class="list"><img src="http://placehold.it/350&text=TEST3" class="image" alt="anuj" width="200"/></li> 
      <li class="list"><img src="http://placehold.it/350&text=TEST4" class="image" alt="anuj" width="200"/></li>  
     </ul> 
    </div> 

<div style="float:left;"> 
    <a class="def" href="javascript: void(0);" style="display:table-cell;height:155px;vertical-align:middle;">NEXT</a> 
</div>

$("a.abc").click(function() { 
    $(".images").each(function(){ 
     $(this).animate({"margin-left":"-=204px"},800)   
            }); 
}); 

$("a.def").click(function() { 
            $(".images").each(function(){ 
             $(this).animate({"margin-left":"+=204px"},800) 
            }); 
});

看到：http://jsfiddle.net/MMyGE/

來源

2012-05-31 07:23:33

thanx您的幫助。 –

語法：.animate（{ 'CSS屬性'， '值'}， '速度'），所以將.animate（{ '左'， '100像素'}， '800'）時，如果你想動畫到左邊只需在值前添加一個（減號），否則它會動畫到右邊。也注意動畫不支持所有CSS屬性。

來源

2012-05-31 06:55:13

如何添加動畫效果左右滾動按鈕單擊？

回答

相關問題