一个元素在淡出另一个元素之后的fadeIn是'真的不管用

我创建了一个名为"PumpnRecords"的网站，它几乎完成了。网站上有一个名为"发布"的部分。它分为两部分，但只有一部分可见。这就是网站：http://s448350928.online.de/pumpn/records/index3

发布部分有以下html代码（简化）：

<div class="container1" id="releases">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">   </script>
<script>
function hide2014and2016show2015()
 {
 $("#2014").fadeOut(4000);
 }
</script>
<script>
 $(document).ready(function(){
 $("#2015").hide();// hide it initially
 $('#forward2014').click(function(){
    $("#2015").delay(4000).fadeIn(4000);                            });
 });
</script>
<h2>Releases</h2>
<div id="yearcontainer">
<div id="back2014" style="display:inline-block">
<img id="back2014img" src="..."/>
</div>
<h2 id="year">2014</h2>
<div id="forward2014" onclick="hide2014and2016show2015();" style="display:inline-block">
<img id="forward2014img" src="..."/>
</div>
</div>
<div id="2014">
    <div class='container3' style="overflow:visible;">
        <h2>EPs</h2>
        <div class='row2'>
            <a href="...">
                <img width="300px" src="..."/>
                <h2>Nano Miratus</h2>
                <h3>Ganz Okay EP (Instrumental)</h3>
            </a>
        </div>
        <div class='row2'>
            <a href="...">
                <img width="300px" src="..."/>
                <h2>Nano Miratus</h2>
                <h3>Ganz Okay EP</h3>
            </a>
        </div>
        <div class='row2'>
            <a href="...">
                <img width="300px" src="..."/>
                <h2>Nano Miratus</h2>
                <h3>Viernacheins EP</h3>
            </a>
        </div>
    </div>
</div>
<div id="2015">
    <div class='container3' style="overflow:visible;">
        <h2>Alben</h2>
        <div class='row2'>
            <a href="...">
                <img width="300px" src="..."/>
                <h2>Nano Miratus</h2>
                <h3>Larmoyanz</h3>
            </a>
        </div>
    </div>
    <div class='container3' style="overflow:visible;">
        <h2>EPs</h2>
        <div class='row2'>
            <a href="...">
                <img width="300px" src="..."/>
                <h2>Nano Miratus</h2>
                <h3>Mrs. EP</h3>
            </a>
        </div>
    </div>
</div>
</div>

如果你看一下发布部分，你会发现有这个标题（"2014"）。这个标题的左右两侧是箭头，或者我认为它们被称为插入符号D

我想要编码的是：当有人单击向右箭头时，id为"2014"的div应在4000毫秒内淡出，然后id为"2015"的div将在4000毫秒后淡出。我在"2015"div的淡入之前放了一个延迟。它也是4000毫秒，所以"2015"的淡入应该在"2014"的淡出结束后立即开始。

实际情况是：https://i.stack.imgur.com/hxLVB.gif

---

那为什么它不起作用呢？在过去的几个小时里，我在谷歌上搜索和堆叠了很多，也经常更改代码，但仍然不起作用（

更新：现在我知道问题是什么，但我无法解决。这个网站是一个单页网站，所以我有一个javascript插件。它叫fullpage.js，我知道它是如何工作的。当你用鼠标滚动时，它会在"页面容器全页面包装器"中添加一个"transform:translate3d（x，y，z）；"属性，并更改y值，这样页面就会向下移动。所以我做了两个小提琴来演示这个问题：

不工作FIDDLE（其中包含transform属性）：

jsfiddle.net/ktf9onjo/（对不起，我不允许发布超过两个可点击链接…）

工作FIDDLE:

jsfiddle.net/rant5af9/

您可以看到问题出在transform属性上。

1. 为什么？？？

2. 我需要一个替代方案。我不能直接删除它，脚本会每次我滚动时都会被阅读。

3. 是的，我可以把translate3d（x，y，z）改成translateY（y），但不，那不管用，我试过了

信息：您可以在两个fiddles的javascript框中找到fullpage.js。

附言：网站还没有完成。很多链接和其他东西目前都不起作用。

请帮忙，fanx！：）

<div id="forward2014" style="display:inline-block">

$('#forward2014').click(function(){
  $("#2014").fadeOut(4000, function(){
    // this starts when the fadeOut is finished
    $("#2015").fadeIn(4000);
  })
});

$(document).ready(function(){
  $("#2015").hide();
  
  $('#forward2014').click(function(){
  
    $("#2014").fadeOut(4000, function(){
    
      // this starts when the fadeOut is finished
    
      $("#2015").fadeIn(4000);
  
    })
  });
});

<div id="2014"style="display:inline-block">
2014
</div>
<div id="2015"style="display:inline-block">
2015
</div>
<div id="forward2014">
>>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$('#whatever').fadeOut('slow', function() {
    $('#whatever').delay(4000).fadeIn('slow');
});