當我嘗試使用 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>

工作 JSFiddle。