如何在元素之间淡入淡出？

Question

[更改单击元素时如何淡入和淡出。我有五个元素，所有元素都是隐藏的，除非您单击前进或上一步按钮。我正在尝试找到一种方法，以便当您单击“下一步”时，当前显示的元素逐渐淡出，而下一项逐渐淡入。

这是我的代码：

HTML：

<ul class="pagnation">
<li><div class="data-item">
sdf
</div></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

JS：

$('.pagnation li:gt(0)').hide();

$('.prev').click(function() {
var first = $('.pagnation').children('li:visible:first');
first.prevAll(':lt(1)').show().fadeIn( "slow" );
first.prev().nextAll().hide().fadeOut( "slow" );
});

$('.next').click(function() {
var last = $('.pagnation').children('li:visible:last');
last.nextAll(':lt(1)').show().fadeIn( "slow" );
last.next().prevAll().hide().fadeOut( "slow" );
});

Answer 1

您可以将fadeToggle用于fadeIn和fadeOut功能。请尝试以下代码-

$('.prev, .next').click(function() {
  var index = $('.pagination').find('li:visible').index();
  if ($(this).hasClass('prev')) {
    index = index == 0 ? 0 : (index - 1);
  } else {
    var totalLiElem = $('.pagination').find('li').length
    index = (index == (totalLiElem - 1)) ? (totalLiElem - 1) : (index + 1);
  }
  $('.pagination').find('li:visible').fadeToggle("slow", "linear");;
  $('.pagination').find('li:eq(' + index + ')').fadeToggle("slow", "linear");
});

ul,
li {
  display: inline-block;
}

ul li:not(:first-child) {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="prev">Previous</button>
<ul class="pagination">
  <li>
    <div class="data-item">
      sdf
    </div>
  </li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<button class="next">Next</button>