手工制作旋转木马

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。