javascript - JQuery hide() 在 fadeIn() 之后不起作用

Question

初始阶段我显示了前五个 li 然后单击更多类别我想显示下一个 5 li(带有 fadin() 效果)，它将继续取决于类别计数

但我面临的问题是 hide() 在 fadeIn() 之后不起作用，它显示所有 li。

我需要的是，当页面加载时，我需要显示前 5 个类别，然后单击更多类别将显示下 5 个类别(带有淡入效果)。

这里正在工作 fiddle

var items = jQuery("ul.main-category-grid > li");
var numItems = items.length;
$showPerClick = 5;
items.slice($showPerClick).hide();
jQuery('.dft-mre-btn > a').on('click', function(e){
  e.preventDefault();
  //   items.show();
  items.show().fadeOut().fadeIn(3000);// when use this line hide() not working
  $showPerClick = 5 + $showPerClick;
  items.slice($showPerClick).hide();
  show_btn_hide();
});

function show_btn_hide(){
  if($showPerClick >= numItems){
    jQuery('.dft-mre-btn').hide();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-category-grid">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
</ul>
<div class="dft-mre-btn">
  <a href="">More Catgeories</a>
</div>

如果有任何帮助，我将不胜感激，提前致谢。

Answer 1

很难准确说出您想要什么，但如果您想一次淡入 5 个项目，请尝试如下:

var items = jQuery("ul.main-category-grid > li");
var numItems = items.length;
var $showPerClick = 5;
items.slice($showPerClick).hide();
jQuery('.dft-mre-btn > a').on('click', function (e) {
  e.preventDefault();

  var next = Math.min(numItems, 5 + $showPerClick);
  items.slice($showPerClick, next).fadeIn(3000);
  $showPerClick = next;

  show_btn_hide();
});

function show_btn_hide() {
  if ($showPerClick >= numItems) {
    jQuery('.dft-mre-btn').hide();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-category-grid">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
</ul>
<div class="dft-mre-btn">
  <a href="">More Catgeories</a>
</div>

正在工作fiddle .