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

JQuery hide() not working after fadeIn()

本文关键字：之后 不起作用 fadeIn JQuery hide      更新时间：2023-09-26

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

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

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

这里正在工作小提琴

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>

我将感激任何帮助，提前谢谢。

很难确切地说出你想要什么，但如果你想一次淡入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>

工作小提琴。

我已经更新了你的小提琴

http://jsfiddle.net/6q1amzbf/7/

var ul = $("ul.main-category-grid");
var numItems = ul.children('li').length;
var showPerClick = 4;
var items = ul.children('li:gt(' + showPerClick + ')');
items.hide();
// init
// items.(':gt(' + showPerClick + ')').hide();
$('.dft-mre-btn > a').on('click', function(e){
    e.preventDefault();
    var showItems = ul.children('li:lt(' + (showPerClick + 5) + '):gt(' + showPerClick + ')');
    showItems.fadeIn(3000);
    showPerClick += 5;
    if (showPerClick >= numItems) {
        $('.dft-mre-btn').hide();
    }
});
相关文章：