fadeIn of an element after fading out another one isn't really working

Question

I've created a website called "Pumpn Records" and it's almost finished. On the website there is a section called "Releases". It is divided in two sections, but only one is visible. So this is the website: http://s448350928.online.de/pumpn/records/index3

The Releases Section there has this html code (simplified):

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

If you look at the Releases Section, you will see there is this title ("2014"). Left and right to this titles are arrows, or carets I think they are called. :D

What I wanted to code is: When someone clicks on the right arrow, the div with the id "2014" should fade out in 4000 milliseconds, then the div with the id "2015" should fade in in 4000 milliseconds. I put a delay before the fade in of that "2015" div. It's also 4000 milliseconds, so the fade in of "2015" should start right after the fade out of "2014" has finished.

What really happens is: https://i.stack.imgur.com/hxLVB.gif

---

So why isn't it working? I googled and stackoverflowed so much in the last hours and changed that code so often, but it still doesn't work. :(

UPDATE: Now I know what the problem is, but I can't solve it. This website is a single page website, so I have a javascript plugin. It's called fullpage.js and I know how it works. When you scroll with your mouse, it adds an "transform: translate3d(x, y, z);" property to the "page-container fullpage-wrapper", and changes the y-value, so the page goes down. So I made two fiddles for a demonstration of the problem:

NOT WORKING FIDDLE (with the transform property in it):

jsfiddle.net/ktf9onjo/ (sorry, I'm not allowed to post more then two clickable links...)

WORKING FIDDLE:

jsfiddle.net/rant5af9/

You see that the problem is the transform property.

1. WHY???

2. I need an alternative. I cannot just remove it, the script will be readd it every time I scroll.

3. Yeah, I could just change the translate3d(x, y, z) to a translateY(y), but nooo, that isn't working, I tried it. :D

INFO: You can find the fullpage.js in the javascript box in both fiddles.

PS: The website isn't finished yet. A lot of links and other things aren't working at the moment.

Please help, fanx! :)

Answer 1

Why the problem happens

As explained by @kosmos in comment:

Because the queue for animations is for every element animation itself. a won't wait for b to make its animation, but if you try to animate a two times, the second animation will wait for the end of the first one.

Solution

jQuery fadeOut function accepts a complete callback function (source).

This callback function is executed once the fade-out is complete. You don't need to use delay anymore this way, and your animations chaining will keep in sync.

html:

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

javascript:

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

});

demo in this snippet

(click the >> as forward button)

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

Further remarks:

• You may want to use jQuery's .on function for event listeners (reference). You can replace the onclick= and the .click by it. This should make your code easier to manage and more performant.
• The ids in your html are supposed to contain at least a letter (source). Replace id="2014" by id="year-2014" or something like that.

Answer 2

i didn't got what you need exactly but to make to jquery actions going sequences you must call the second action with call back like this

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

See This