Question

我将这个垂直滑块调整为一个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'});
           });
       });
  });

这是我的JsFiddle。感谢。

Answer 1

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

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

然后你需要修复你的jQuery（动画应该是36px，因为这是li s的高度：在你的css中）

$(".cnext").click(function (e) {
    e.preventDefault();
    $("section#canais ul").css({
        'height': ''
    }).animate({
        top: 36 + "px"
    }, function () {
        $("#canais ul li").last().insertBefore($("#canais ul li").first());
        $(this).css({
            'top': 0
        });
    });
});


$(".cprev").click(function (e) {
    e.preventDefault();
    $("section#canais ul").css({
        'height': ''
    }).animate({
        top: -36 + "px"
    }, function () {
        $("#canais ul li").first().insertAfter($("#canais ul li").last());
        $(this).css({
            'top': 0
        });
    });
});

Example

您可能希望将ul包装在具有设定高度并且隐藏溢出的div中，这样一旦上升/下降就无法看到div

Updated Fiddle

Answer 2

允许您一次显示所有五个项目的另一个选项是使用clone（），然后在动画完成后删除隐藏的元素。这里有一个例子：http://jsfiddle.net/jme11/5Y54k/

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

HTML：

<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>

CSS：

#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;
}

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();
    });
});

如何修复此垂直滑块

2 个答案: