0

使用 jQuery 为 width() 设置动画会在下面创建某种填充。

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

这是一个 jsfiddle（单击“s”框或 HTML 上的任意位置）：

http://jsfiddle.net/46XxU/1/

这是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/

4

1 回答 1

1

如果您在单击#search 时看到 jquery 放置一个溢出：隐藏样式元素，那就是这种填充。另外，如果您输入：

#search{
  overflow:hidden;
}

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

那应该可以解决问题。

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

更新＃1：很可能a链接会产生额外的空间，因此#menu的高度大于搜索输入。

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

于 2013-10-17T00:43:55.310 回答