手工製作旋轉木馬

Question

我正在製作帶有上一個/下一個按鈕的最簡單的垂直旋轉木馬。我幾乎沒有，但我還沒有想出如下：

var shortnewsblockHeight = $(".shortnewsblock").outerHeight(); 
var totalnewsblocks = $(".shortnewsblock").length; 
var i = 0; 
$(".stamp.long a.prev").css({ "opacity": "0.3", "text-decoration": "none", "cursor": "default" }); 

goDown(); 
goUp(); 

function goDown() { 
    $(".stamp.long a.next").click(function() { 
     $(".stamp.long a.prev").animate({ 
      'opacity': '1' 
     }, 300); 
     $(".stamp.long a.prev").css({ "text-decoration": "underline", "cursor": "pointer" }); 
     i++; 
     if (i != (totalnewsblocks - 5)) { 
      $("#shortnewsblocks > #inner").stop().animate({ 
       'marginTop': '-=' + shortnewsblockHeight 
      }, 600); 
     } else { 
      $("#shortnewsblocks > #inner").stop().animate({ 
       'marginTop': '-=' + shortnewsblockHeight 
      }, 600); 
      $(".stamp.long a.next").animate({ 
       'opacity': '0.3' 
      }, 300); 
      $(".stamp.long a.next").css({ "text-decoration": "none", "cursor": "default" }); 
      $(".stamp.long a.prev").animate({ 
       'opacity': '1' 
      }, 300); 
      $(".stamp.long a.prev").css({ "text-decoration": "underline", "cursor": "pointer" }); 

     } 
     return false; 
    }); 
} 

function goUp() { 
    $(".stamp.long a.prev").click(function() { 
     i--; 
     if (i != 0) { 
      $("#shortnewsblocks > #inner").stop().animate({ 
       'marginTop': '+=' + shortnewsblockHeight 
      }, 600); 
      $(".stamp.long a.next").animate({ 
       'opacity': '1' 
      }, 300); 
      $(".stamp.long a.next").css({ "text-decoration": "underline", "cursor": "pointer" }); 

     } else { 
      $("#shortnewsblocks > #inner").stop().animate({ 
       'marginTop': '+=' + shortnewsblockHeight 
      }, 600); 
      $(".stamp.long a.prev").animate({ 
       'opacity': '0.3' 
      }, 300); 
      $(".stamp.long a.prev").css({ "text-decoration": "none", "cursor": "default" }); 


     } 
     return false; 
    }); 
} 

1. 如果我點擊太快的上/下一個按鈕，高度被擾亂，我的旋轉木馬失去了它的「塊式' 動畫。

2. 如果傳送帶用完了要滾動的元素，我的按鈕淡出（並且光標變爲默認值，因此最終用戶不會嘗試點擊它）。但是我需要讓它們完全禁用，因爲現在終端用戶仍然可以點擊它，搞砸了旋轉木馬。

乾杯！

的jsfiddle：http://jsfiddle.net/REVDc/1/

Answer 1

1. 從動畫刪除stop或當動畫是怎麼回事刪除單擊事件。使用pointer-events: none禁用點擊。更多信息here。