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動畫

回答

相關問題