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件物品，请尝试这样：

＆＃13;

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();
  }
}

＆＃13;

<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>

＆＃13;

工作fiddle。

Answer 2

我更新了你的小提琴

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();
    }
});

JQuery hide（）在fadeIn（）之后无法正常工作

2 个答案: