Some strange things are happening on my jQuery slide() function with delay()

Question

All I'm trying to do is slide up a div onclick before another div slides down. But it's doing weird things like failing to delay. I'm guessing I should be using something other than delay, but I don't know what to use since I am new.

jQuery:

$('#home').on('click', function () {
    $('section').slideUp();
});

$('#link1').on('click', function () {
    $('#div2').slideUp().delay(2500);
    $('#div1').slideDown();
});

$('#link2').on('click', function () {
    $('#div1').slideUp().delay(2500);
    $('#div2').slideDown();
});

HTML:

        <ul>
            <li><a id="home" href="#">Home</a></li>
            <li><a id="link1" href="#">Link1</a></li>
            <li><a id="link2" href="#">Link2</a></li>
        </ul>
        <section id="div1">
            <h2>Hello</h2>
            <p>Text here</p>
        </section>

        <section id="div2">
            <h2>Sub Title</h2>
            <p>Text</p>
            <h2>Sub Title</h2>
            <p>Text</p>
            <h2>Sub Title</h2>
            <p>Text</p>
        </section>

CSS:

#div1, #div2 {
display: none;
}

JSFiddle

Answer 1

You can try a promise to ensure that slide up happens before slide down

Promise...

Fiddle...

Like So:

$('#link1').on('click', function() {
  $.when($('#div2').slideUp()).done(function() {
    $('#div1').slideDown();
  });
});

$('#link2').on('click', function() {
  $.when($('#div1').slideUp()).done(function() {
    $('#div2').slideDown();
  });
});

#div1,
#div2 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a id="link1">link 1</a>
  </li>
  <li><a id="link2">link 2</a>
  </li>
</ul>

<div id="div1">div 1</div>
<div id="div2">div 2</div>