jQueryのループが分かりません。

前提・実現したいこと

下のコードでは、ページをクリックすると次のページにいきます。ボタン（'.button'）をクリックして次のページに行くにはどうすれば良いでしょうか？

該当のソースコード

JavaScript
1<!DOCTYPE html>
2<html>
3
4
5<style>
6.page:nth-child(n+2){display:none;}
7.button{
8    height:50px;
9    width:50px;
10    background-color:blue;
11}
12</style>
13<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
14<script>
15$(function(){
16  $('.page').on('click',function(){
17    var idx=$('.page').index(this);
18    $(this).fadeOut().queue(function(){
19      $('.page').eq(idx+1).fadeIn().dequeue();
20    });
21  });
22});
23</script>
24<div id="page1" class="page">
25  <h1>page1</h1>
26  <div class="button"></div>
27</div>
28<div id="page2" class="page">
29  <h1>page2</h1>
30  <div class="button"></div>
31</div>
32<div id="page3" class="page">
33  <h1>page3</h1>
34  <div class="button"></div>
35</div>
36<div id="page4" class="page">
37  <h1>page4</h1>
38  <div class="button"></div>
39</div>
40<div id="page5" class="page">
41  <h1>page5</h1>
42</div>

yambejp

2020/07/11 06:33

前の質問閉じてないのでそっちに返答してあります同じ内容を挙げないほうがよいですよ

行動規範の内容に同意します

回答1件

自己解決

https://teratail.com/questions/276781で解決しました。同じ質問を二回してしまいました。ごめんなさい。
以下が解決方法になります。

javascript
1$(function(){
2  $('.button').on('click',function(){
3    var idx=$('.page').index($(this).closest('.page'));
4    $('.page').eq(idx).fadeOut().queue(function(){
5      $('.page').eq(idx+1).fadeIn().dequeue();
6    });
7  });
8});