我的 jQuery 带有 delay() 的 slide() 函数发生了一些奇怪的事情

Question

我想做的就是向上滑动一个 div onclick，然后再向下滑动另一个 div。但它正在做一些奇怪的事情，比如没有延迟。我猜我应该使用延迟以外的东西，但我不知道该用什么，因为我是新手。

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

您可以尝试承诺确保向上滑动发生在向下滑动之前

Promise...

Fiddle...

像这样：

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

我的 jQuery 带有 delay() 的 slide() 函数发生了一些奇怪的事情

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

jquery

delay

slidedown

slideup