CODEWITHSUNDEEP
javascriptjqueryjquery-ui
GEV
GEV

Reputation: 467

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

$(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)

Upvotes: 2

Views: 53

Answers (1)

4b0
4b0

Reputation: 22323

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.

Upvotes: 1

Related Questions