jQuery分頁和淡入淡出

Question

我是全新的，不幸的是我不擅長jQuery。但我有以下問題，我會深表感謝您的幫助！

我收到了一份我想分頁的項目列表。我已經能夠進行分頁該名單包括

<ul class="products_erweitert"> 
    <li> 
     <div class="asa2_uhrenshop_main_container"></div> 
    </li> 
    <li> 
     <div class="asa2_uhrenshop_main_container"></div> 
    </li> 
</ul> 

中使用以下腳本：

(function($){ 
    $(document).ready(function(){ 
     $(".pagination").customPaginate({ 
      itemsToPaginate : ".asa2_uhrenshop_main_container" 
     }); 
    }); 
})(jQuery); 

和

(function($){ 
    $.fn.customPaginate = function(options){ 
     var paginationContainer = this; 
     var itemsToPaginate; 
     var defaults = { 
      itemsPerPage : 6 
     }; 
     var settings = {}; 

     $.extend(settings, defaults, options); 

     var itemsPerPage = settings.itemsPerPage; 

     itemsToPaginate = $(settings.itemsToPaginate); 
     var numberOfPaginationLinks = Math.ceil((itemsToPaginate.length/itemsPerPage)); 

     $("<ul></ul>").prependTo(paginationContainer); 

     for(var index = 0; index < numberOfPaginationLinks; index++){ 
      paginationContainer.find("ul").append("<li>"+ (index+1) + "</li>"); 
     } 

     itemsToPaginate.filter(":gt(" + (itemsPerPage - 1) + ")").hide(); 

     paginationContainer.find("ul li").on('click', function(){ 
      var linkNumber = $(this).text(); 
      var itemsToHide = itemsToPaginate.filter(":lt(" + ((linkNumber-1) * itemsPerPage) + ")"); 
      $.merge(itemsToHide, itemsToPaginate.filter(":gt(" + ((linkNumber * itemsPerPage) - 1) + ")")); 
      itemsToHide.hide(); 

      var itemsToShow = itemsToPaginate.not(itemsToHide); 
      itemsToShow.show("fast"); 
     }); 
    }; 
}(jQuery)); 

但我有三個問題。

1.）假設我在該列表中有18個項目。所以這18個項目生成3頁。我希望他們之間有一個平穩的過渡或淡入淡出效果。不幸的是我迄今爲止沒有成功......

2.）現在我在頁面1,2和3的底部有三個按鈕。我想要一個「Previous」和「Next」按鈕，但我不知道如何將它集成到我的代碼中。

3.）當我點擊我的18個項目列表的第2頁時，前6個項目被隱藏。不幸的是，他們的<li>集裝箱仍然存在，並有餘量，這似乎需要在頂部的空間。

我希望有人能幫助我。

在此先感謝！

編輯：我可以自己修復編號3）。我爲上述<li>課程分配了一門課，並將其授予<li class="pagination_show">。然後我更新了第一個代碼片段，並用.pagination_show替換了.asa2_uhrenshop_main_container。

編輯2：我做了一個的jsfiddle：https://jsfiddle.net/b8gmqx9p/

Answer 1

對於問題1，試試這個請，

(function($){ 

     $.fn.customPaginate = function(options) 
     { 
      var paginationContainer = this; 
      var itemsToPaginate; 


      var defaults = { 

       itemsPerPage : 3 

      }; 

      var settings = {}; 

      $.extend(settings, defaults, options); 

      var itemsPerPage = settings.itemsPerPage; 

      itemsToPaginate = $(settings.itemsToPaginate); 
      var numberOfPaginationLinks = Math.ceil((itemsToPaginate.length/itemsPerPage)); 

      $("<ul></ul>").prependTo(paginationContainer); 

      for(var index = 0; index < numberOfPaginationLinks; index++) 
      { 
       paginationContainer.find("ul").append("<li>"+ (index+1) + "</li>"); 
      } 

      itemsToPaginate.filter(":gt(" + (itemsPerPage - 1) + ")").hide(); 

      paginationContainer.find("ul li").on('click', function(){ 

       var linkNumber = $(this).text(); 

       var itemsToHide = itemsToPaginate.filter(":lt(" + ((linkNumber-1) * itemsPerPage) + ")"); 
       $.merge(itemsToHide, itemsToPaginate.filter(":gt(" + ((linkNumber * itemsPerPage) - 1) + ")")); 
       itemsToHide.hide(); 

       var itemsToShow = itemsToPaginate.not(itemsToHide); 
       itemsToShow.show(1500); 

      }); 

     } 

}(jQuery)); 

(function($){ 

    $(document).ready(function(){ 

     $(".pagination").customPaginate({ 

      itemsToPaginate : ".pagination_show" 

     }); 

    }); 

})(jQuery) 

我已經改變itemsToShow.show("fast");到itemsToShow.show(1500);

在這裏，我傳遞時間（毫秒）作爲參數而不是「快速」，您可以按照您的要求更改該時間參數。

對於問題2，我建議你去找一個jQuery分頁插件。有很多，其中例如， jQuery-Paging， smart paginator（這是體面的，我們用它在我們的應用程序）

以下鏈接太多， http://www.thedevline.com/2015/01/best-free-jquery-pagination-plugins-for.html， http://www.designrazor.net/best-free-jquery-pagination-plugins/