All geek questions in one place

Why div content jumps after slide effect

  <style>
  #toggle {
    width: 150px;
    height: 50px;
    background: crimson;
    color: white;
    padding: 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
</head>
<body>
<button id="clickme">Click moi</button>
<div id="toggle">
  <p>This will slide in and out.</p>
</div>

<script>
$( document ).ready(function() {
  $('#clickme').click(function () {
    $( "#toggle" ).toggle( "slide" );
  });
});
</script>

The height of the #toggle div should be constant before / during / after the slide effect. For some reason, the div is shifted, and then the height is increased to 50 pixels. I wanted to know why this is happening.

+4
source share
3 answers

Deleted pas it was not necessary for this example. It works, see here:

http://jsfiddle.net/3bVZy/

If you require plet me know.

EDIT At the same distance in this example, add the following to your #toggleCSS:

  position: relative;
  top:15px;
+1
source

- Paragraphe, paragraphe P margin 0,

  p { margin: 0; }

+1

$(document).ready(function() {
  $('#clickme').click(function () {         
    $("#toggle" ).toggle("slide");
  });
});

I changed jQuery link as well as css part

Demo1

Demo2

0
source

Source: https://habr.com/ru/post/1548152/

More articles:


All Articles