Question

我尝试做的就是在另一个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

Answer 1

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

Promise...

Fiddle...

喜欢如此：

＆＃13;

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

＆＃13;

#div1,
#div2 {
  display: none;
}

＆＃13;

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

＆＃13;

我的jQuery slide（）函数发生了一些奇怪的事情，带有delay（）

1 个答案: