当我尝试使用 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>

How can I get rid of this small movement down? ( JSFiddle )

Answer 1

You need to find h3 inside div and hide that one instead of the #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.