1

divを上にスライドさせたいのですが、それが完全に上にスライドした後、もう一方<div>を下にスライドさせたいです(デフォルトでは非表示になっています)。

私は次のコードを試していますが、それは私が望むことを行いますが、最初のdivが完全にスライドした後にdivがスライドするという効果しか得られません。他のdivが上にスライドし始めるとすぐにdivが表示され始めるようです。

では、最初の div が完全に上にスライドしてから下にスライドし始めるまで、どのように待機させることができますか。

HTML:

<div class="box">
    <div class="up"></div>
    <div class="down"></div>
</div>

<a href="#" id="hidediv">Hide me</a>

CSS:

.up{
    width: 100px;
    height: 100px;
    background: orange;
    display: block;
}

.down{
    width: 100px;
    height: 100px;
    background: red;
    display: none;
}

jQuery:

$("#hidediv").click(function () {
  $(".up").slideUp(800);
  $(".down").slideDown(800);
});

デモ：

http://jsfiddle.net/hFyvw/

4

2 に答える 2

5

コールバックで使用してみてください：

$("#hidediv").click(function () {
  $(".up").slideUp(800, function () {
    $(".down").slideDown(800);
  });
});

ここにJSFiddleがあります

于 2012-08-30T08:20:17.313 に答える
4

slideUp のコールバック関数を使用します。 

$("#hidediv").click(function () {
  $(".up").slideUp(800, function () {
    $(".down").slideDown(800);
  });
});
于 2012-08-30T08:19:59.040 に答える