使用jQuery UI

Question

我使用jQuery UI来滑动div。但是，下一项.bottom-div不能顺利向下滑动。

我知道我可以用纯jQuery做到这一点。仅供查询，这是否可以使用jQuery UI？

https://jsfiddle.net/L4pzytkg/

Answer 1

使用show()函数，而不是使用hide()和slide()函数：

＆＃13;

＆＃13;

$(function() {
  $('#showdiv').click(function() {
    $('.mydiv').slideDown(300);
  });

  $('#hidediv').click(function() {
    $('.mydiv').slideUp(300);
  });

  $('#togglediv').click(function() {
    $('.mydiv').slideToggle(300);
  });
});

＆＃13;

.ui-effects-wrapper {
  height: auto !important;
}
.wrap {} .mydiv {
  height: 300px;
  padding: 15px 30px;
  border: 2px solid;
  background: orange;
}
.mydiv p {
  padding: 10px 30px;
  margin: -15px -30px 0;
  background: yellow;
}
.below-div {
  background: red;
  padding: 10px 30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="showdiv">
  Slide Down
</button>
<button type="button" id="hidediv">
  Slide Up
</button>
<button type="button" id="togglediv">
  Toggle
</button>

<div class="wrap">

  <div class="mydiv">
    <p>This is a div with long text; really extralong</p>
  </div>
</div>
<div class="below-div">
  This is a div below sliding div.
</div>

＆＃13;

＆＃13;

＆＃13;

Updated JSFiddle

Answer 2

可能是这样的？：

＆＃13;

＆＃13;

$(function() {
  $('#showdiv').click(function() {
    $('.mydiv').show(1000);
  });

  $('#hidediv').click(function() {
    $('.mydiv').hide(1000);
  });
});

＆＃13;

.ui-effects-wrapper {
  height: auto !important;
}
.wrap {} .mydiv {
  height: 300px;
  padding: 15px 30px;
  border: 2px solid;
  background: orange;
}
.mydiv p {
  padding: 10px 30px;
  margin: -15px -30px 0;
  background: yellow;
}
.below-div {
  background: red;
  padding: 10px 30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="showdiv">
  Slide Down
</button>
<button type="button" id="hidediv">
  Slide Up
</button>

<div class="wrap">

  <div class="mydiv">
    <p>This is a div with long text; really extralong</p>
  </div>
</div>
<div class="below-div">
  This is a div below sliding div.
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

相反，使用幻灯片效果可以使用尺寸效果：

＆＃13;

＆＃13;

$(function () {
  $('#showdiv').click(function() {
    $('.mydiv').show('size', { origin: ['top', 'center'] }, "slow");
  });

  $('#hidediv').click(function() {
    $('.mydiv').hide('size', { origin: ['top', 'center'] }, "slow");
  });
});

＆＃13;

.ui-effects-wrapper {
  height: auto !important;
}
.wrap {
}
.mydiv {
  height: 100px;
  padding: 15px 30px;
  border: 2px solid;
  background: orange;
}
.mydiv p {
  padding: 10px 30px;
  margin: -15px -30px 0;
  background: yellow;
}
.below-div {
  background: red;
  padding: 10px 30px;
}

＆＃13;

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<button type="button" id="showdiv">
    Slide Down
</button>
<button type="button" id="hidediv">
    Slide Up
</button>
<div class="wrap">
    <div class="mydiv">
        <p>This is a div with long text; really extralong</p>
    </div>
</div>
<div class="below-div">
    This is a div below sliding div.
</div>

＆＃13;

＆＃13;

＆＃13;

您也可以使用animate：

＆＃13;

＆＃13;

$(function () {
  $('#showdiv').click(function() {
    $('.mydiv').animate( { height: "show" }, 'slow');
  });

  $('#hidediv').click(function() {
    $('.mydiv').animate( { height: "hide" }, 'slow');
  });
});

＆＃13;

.ui-effects-wrapper {
  height: auto !important;
}
.wrap {
}
.mydiv {
  height: 100px;
  padding: 15px 30px;
  border: 2px solid;
  background: orange;
}
.mydiv p {
  padding: 10px 30px;
  margin: -15px -30px 0;
  background: yellow;
}
.below-div {
  background: red;
  padding: 10px 30px;
}

＆＃13;

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button type="button" id="showdiv">
    Slide Down
</button>
<button type="button" id="hidediv">
    Slide Up
</button>
<div class="wrap">
    <div class="mydiv">
        <p>This is a div with long text; really extralong</p>
    </div>
</div>
<div class="below-div">
    This is a div below sliding div.
</div>

＆＃13;

＆＃13;

＆＃13;