jQuery width（）動畫創建填充（可能的CSS問題）

使用jQuery設置動畫寬度（）會在下面創建某種填充。jQuery width（）動畫創建填充（可能的CSS問題）

我有一個隱藏的元素（輸入），因爲父母有溢出：隱藏。當用戶點擊鏈接時，鏈接本身消失，並將寬度改變爲輸入的一個，以便神奇地顯示輸入。不幸的是，它僅在動畫過程中創建了某種填充。

這裏有一個的jsfiddle（點擊「S」框或只是對HTML的任何地方）：

這裏的JS：

jQuery('#search').on('click', function(){ 
     event.stopPropagation(); 
     var formWidth = jQuery(this).children('form').width(); 
     jQuery(this).children('form').animate({left: "0"}); 
     jQuery(this).animate({width: formWidth}); 
     jQuery('#search form input').focus(); 
    }); 

    jQuery('html').click(function(){ 
     jQuery('#search').animate({width: "2rem"}); 
     jQuery('#search form').animate({left: "2rem"}); 
     jQuery('#search form input').val(''); 
    });

和HTML：

<div id="menu"> 
    <a href="#" class="link">Other links</a> 
    <a href="#" class="link">Other links</a> 
    <div id="search"> 
    <i class="icon">s</i> 
    <form method="get" action=""> 
    <input type="text" placeholder="type to search..." /> 
    </form> 
    </div> 
</div> 
<p>Click on "s" to show search input. Or anywhere on the site to hide it. Why does it add some kind of margin/padding on click?</p> 
<marquee>Welcome! It's 1999 all over again!</marquee>

And CSS：

body { 
    padding: 0; 
    margin: 0; 
    text-align: center; 
} 

#menu { 
    text-align: right; 
    background: #555; 
    margin: 0 auto; 
    width: 500px; 
    overflow: hidden; 
} 

#search { 
    display: inline-block; 
    width: 2rem; 
    cursor: pointer; 
    position: relative; 
} 

#search, 
#search i { 
    line-height: 2rem; 
    text-align: center; 
    width: 2rem; 
    height: 2rem; 
    background: #eee; 
} 

#search form { 
    position: absolute; 
    top: -2px; 
    left: 2rem; 
    width: 180px; 
} 

#search form input { 
    position: relative; 
    height: 2rem; 
    border: 0; 
    width: 180px; 
    background: #efefef; 
} 

marquee { 
    width: 500px; 
    margin: 0 auto; 
}

和小提琴再次：http://jsfiddle.net/46XxU/1/

來源

2013-10-17 Wordpressor