Question

我的以下代码存在问题。

如果我点击h1元素，它会改变它的宽度，这是它应该做的。但是，当单击h1元素时，h1元素的div容器会“跳转”一点。如果我将h1元素更改为div，span等，则会发生同样的事情。它使用的唯一元素是按钮。

然而，奇怪的是，当我删除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>

Answer 1

只需将overflow:hidden媒体资源添加到您的h1代码中，它就可以运行得很好。

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

工作演示：JSfiddle

div元素'跳转'在我的jQuery动画中

1 个答案: