div元素“跳”在我的jQuery动画

如果我点击h1元素上，它改变它的宽度，这是它应该做的。然而，在div容器h1元素是h1元素上，当点击“跳”了一点。如果我改变了H1元素div的，跨度等，它与一个按钮的唯一元素同样的事情发生。

但是，奇怪的是，当我删除我的HTML代码（<!DOCTYPE html>）的第一行并将其保留为空时，它工作得很好 - div元素不会跳转。如果我删除从CSS的display: inline-block线也有效，但随后的标题不居中。

任何想法，问题可能是什么？或者它是一个错误？

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>jQuery.animate()</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script> 
     $(document).ready(function() { 
      $("h1").click(function() { 
       $("h1").animate({width: "1000px"}, 500); 
      }); 
     }); 
    </script> 
    <style> 
     #container { 
      background: orange; 
      margin: 20px; 
      padding: 30px; 
      text-align: center; 
     } 

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

来源

2014-10-17 user3022069

就在overflow:hidden属性添加到您的h1标签，它应该工作的伟大。

jQuery中的动画增加了溢出：隐藏到您的h1标签中的时间不到1秒。如果你使用它们，你可以在Webdevelopers Tools中看到它。默认情况下它被设置为auto。所以当你的动画运行你的div时，会在短时间内得到这个奇怪的“跳跃”动画。所以它很简单，将这个属性添加到你的样式，它不会跳到那里。

工作演示：JSfiddle

来源

2014-10-17 16:08:19 Kamil

div元素“跳”在我的jQuery动画

回答

相关问题