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

【问题标题】：Some strange things are happening on my jQuery slide() function with delay()我的 jQuery slide() 函数上发生了一些奇怪的事情，带有 delay()
【发布时间】：2016-02-10 12:01:04
【问题描述】：

我要做的就是在另一个 div 向下滑动之前向上滑动一个 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

【问题讨论】：

能否添加您的html代码
@Ivar 他们总是可以在 stacksn-p 中进行编辑，使其可以在 stackoverflow 上运行。更明显的问题是“它在做奇怪的事情”并不是真正的问题描述。
@chils SO上有很多质量很差的问题。如果有人发布一个没有工作示例的问题说“它在做奇怪的事情”，人们往往会要求更多细节。由于他们有时每天连续这样做 20 次，因此并不总是像第一次那样礼貌。不要太私人化。你现在的问题很好。 :) 下一次，如果您发布一个带有良好问题陈述、期望行为和工作示例的问题，那么您就可以开始了。 :)

标签： jquery delay slidedown slideup

【解决方案1】：

你可以尝试一个 promise 以确保在向下滑动之前发生向上滑动

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>

【讨论】：

非常感谢！非常有帮助，并且完全按照我的预期工作。 :)