为什么我用jQuery UI 隐藏div 会先下移再滑动？

Question

$(document).ready(function() {
  $("button").click(function() {
    $("#test").hide("slide", {
      direction: "left"
    }, 2000)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>
  <h1>
    base base base
  </h1>
  <div id="test">
    <h3>
      aaaaaaaaaaaaaaa
    </h3>
    <button>test</button>
  </div>
</div>

我怎样才能摆脱这个小动作呢？ (JSFiddle)

Answer 1

您需要在 div 中找到 h3 并隐藏那个而不是 #test。

$(document).ready(function() {
  $("button").click(function() {
    $("#test").find('h3').hide("slide", {
      direction: "left"
    }, 2000)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>
  <h1>
    base base base
  </h1>
  <div id="test">
    <h3>
      aaaaaaaaaaaaaaa
    </h3>
    <button>test</button>
  </div>
</div>

Working JSFiddle.

为什么我用jQuery UI 隐藏div 会先下移再滑动？

Why does the div move down before sliding when I try to hide it with jQuery UI?

javascript

jquery

jquery-ui