Question

使用jQuery设置width（）动画会在下面创建一些填充。

我有一个隐藏的元素（输入），因为父元素有溢出：隐藏。当用户点击链接时，链接本身会消失并将宽度更改为输入之一，因此输入会神奇地显示。不幸的是，它只在动画期间创建了某种填充。

这是一个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>

和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/

Answer 1

如果你看到点击#search时jquery放了一个溢出：隐藏的样式元素，那就是那种填充。如果你把：

#search{
  overflow:hidden;
}

填充物永久显示。所以有些东西会增加额外的空间，那就是菜单容器。只需添加#menu{height: 2rem;}

这应该解决问题。

工作示例：http://jsfiddle.net/46XxU/2/

更新＃1：很可能一个链接会产生额外的空间，这样#menu的高度就会大于搜索输入。

更新＃2：因为我的第一个解决方案链接显示得不是很好我对html和css进行了一些更改以使其正确。 http://jsfiddle.net/46XxU/3/

jQuery width（）动画创建填充（可能的CSS问题）

1 个答案: