Javascript 如何修复此垂直滑块的错误

我正在为pessoal项目调整这个垂直滑块，但是当我点击向上或向下箭头时，它可以工作，但没有任何动画。我希望它发生一个向上或向下滑动顺利取决于点击按钮。这是改编后的JS：

// JavaScript Document
 $(function() {
      $("section#canais").hover(function() {
           $("section#buttonsubir").fadeIn();
           $("section#buttondescer").fadeIn();
      }, function(){
           $("section#buttonsubir").fadeOut();
           $("section#buttondescer").fadeOut();     
      });

      $(".cnext").click(function(e) {
           e.preventDefault();
           $("section#canais ul").css({'height' : ''}).animate({top:275},  function(){
                $("#canais ul li").last().after($("#canais ul li").first());
                $(this).css({'down':'0', 'height':'auto'});     
           });
      });

      $(".cprev").click(function(e) {
           e.preventDefault();
           $("#canais ul li").first().before($("#canais ul li").last().css({'top':-275}) );
           $("section#canais ul").css({'height':''}).animate({top:275}, function(){
                $("#canais ul li").first().css({'margin-left':'0'});    
                $(this).css({'left':'0', 'height':'auto'});
           });
       });
  });

---

这是我的。谢谢。

您需要改变一些事情-首先，您需要ul绝对定位：

#left-content #canais-links {
    position:absolute;
}

然后需要修复jQuery（动画应该是

36px

，因为这是css中

li

s:的高度）

您可能希望将ul封装在一个div中，设置高度并隐藏溢出，以便在div上升/下降时看不到它

---

另一个允许您同时显示所有五个项目的选项是使用clone（），然后在动画完成后删除隐藏的元素。例如：

我非常喜欢Pete的方法，但这种方法的一些好处是，它使用css来显示和隐藏上下箭头，减少了jQuery代码，因为它不依赖于定位，它最终使标记和css变得更小

HTML:

jQuery：

$('.cprev').click(function () {
    $('#canais-links li:first-child').clone().insertAfter('#canais-links li:last-child');
    $('li:first-child').slideUp('slow', function(){
        $('li:first-child').remove();
    });
});
$('.cnext').click(function () {
    var copieditem = $('#canais-links li:last-child').clone()
    copieditem.insertBefore('#canais-links li:first-child').hide();
    $('li:first-child').slideDown('slow', function(){
        $('li:last-child').remove();
    });
});

---

好的@Pete，但我需要这样一部电影：

<div id="left-content">
    <div id="img-canais"></div> 
    <a href="#" class="cprev direction">UP</a>
    <ul id="canais-links">
        <li>
            <a href="#">Page 1</a>
        </li>
        <li>
            <a href="#">Page 2</a>
        </li>
        <li>
            <a href="#">Page 3</a>
        </li>
        <li>
            <a href="#">Page 4</a>
        </li>
        <li>
            <a href="#">Page 5</a>
        </li>
    </ul> 
    <a href="#" class="cnext direction">DOWN</a>
</div>

#left-content {
    width: 203px;
}
.direction {
    opacity: 0;
    transition:opacity .25s linear;
    text-align: center;
    display: block;
    width: 203px;
}
#left-content:hover .direction {
    opacity: 1;
}
#canais-links {
    list-style: none;
    margin: 0 0 25px 0;
    padding: 0;
    height: 300px;
    display:block;
    overflow:hidden;
}
#canais-links li {
    height: 36px;
    width: 100%;
    background-color: #253B6B;
    display: block;
    margin-top: 25px;
}
#canais-links li a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: bold;
    color: #FFF;
    text-decoration: none;
    display: block;
    height: 36px;
    text-align: center;
}

$('.cprev').click(function () {
    $('#canais-links li:first-child').clone().insertAfter('#canais-links li:last-child');
    $('li:first-child').slideUp('slow', function(){
        $('li:first-child').remove();
    });
});
$('.cnext').click(function () {
    var copieditem = $('#canais-links li:last-child').clone()
    copieditem.insertBefore('#canais-links li:first-child').hide();
    $('li:first-child').slideDown('slow', function(){
        $('li:last-child').remove();
    });
});