user3022069 user3022069 - 2 months ago 4x
CSS Question

div element 'jumps' in my jQuery animation

I have a problem with the following code of mine.

If I click on the h1 element, it changes its width, which is what it's supposed to do. However, the div container the h1 element is in 'jumps' a little when clicking on the h1 element. The same thing happens if I change the h1 element to div, span, etc. The only element it works with is a button.

The weird thing, however, is when I remove the first line of my HTML code (

<!DOCTYPE html>
) and leave it empty it works just fine - the div element doesn't jump. It also works if I delete the
display: inline-block
line from the CSS, but then the heading isn't centered.

Any idea what the problem might be? Or is it a bug?

<!DOCTYPE html>
<meta charset="utf-8">
<script src=""></script>
$(document).ready(function() {
$("h1").click(function() {
$("h1").animate({width: "1000px"}, 500);
#container {
background: orange;
margin: 20px;
padding: 30px;
text-align: center;

h1 {
display: inline-block;
background: yellow;
width: 250px;
<div id="container">
<h1>Click here</h1>


Just add the overflow:hidden property to your h1 tag and it should work great.

The animation in jQuery adds overflow:hidden to your h1 tag for a less than a 1 sec. You can see it in Webdevelopers Tools if you use them. By default its set to auto. So when your animation run your div gets this weird "jump" animation for a short while. So its simple to add this property to your styles and it wont be jumping there.

Working demo: JSfiddle