JQuery的隱藏（）淡入（）

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。

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