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

Question

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

这是我的代码：

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("fast", "linear", function() {
    $('.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>

Answer 2

当我连续单击下一步按钮时，我会看到这种类型的视图，我的 display.please 检查并更正它，伙计。

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

How to fade in and out between elements?

jquery

fadeout

fadein