javascript - 单击时仅显示前 4 行和幻灯片过渡

Question

我构建了一个缩略图轮播，一次只显示 4 里元素。这是代码。HTML:

  <div class="grid__item medium-up--one-fifth thumbnails-carousel">
    <p id="prev" class="gallery-arrows"><i class="fas fa-angle-up"></i></p>
<ul class="small--hide product-images clearfix carousel slide" data-ride="carousel" data-interval="false">
{% for image in product.images %}
  <li class="item">
      <img src="{{ image.src | img_url: '160x160' }}" alt="{{ image.alt | escape }}" data-product-single-thumbnail>
  </li>
{% endfor %}
</ul>
<p id="next" class="gallery-arrows"><i class="fas fa-angle-down"></i></p>
</div>

一次只显示4里的JS:

$(document).ready(function () {
    var $lis = $(".thumbnails-carousel li").hide();
    $lis.slice(0, 4).show();
    var size_li = $lis.length;
    var x = 4,
        start = 0;
    $('#next').click(function () {
        if (start + x < size_li) {
            $lis.slice(start, start + x).hide();
            start += x;
            $lis.slice(start, start + x).show();
        }
    });
    $('#prev').click(function () {
        if (start - x >= 0) {
            $lis.slice(start, start + x).hide();
            start -= x;
            $lis.slice(start, start + x).show();
        }
    });

});

所以这行得通，但我试图让它看起来更平滑一点，并为其添加滑动过渡效果。

我试过添加

    -moz-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;

到 li 但这没有用。任何想法如何做到这一点？

Answer 1

你可以试试 .fadeOut() 和 .fadeIn() 而不是 .show() 和 .hide() 。

http://api.jquery.com/fadeout/jQuery 中内置了更多此类函数，请查看文档以了解替代方案。