javascript - jQuery:动画元素为出现的另一个元素留出空间

Question

所以我有一个函数，当输入的值改变时调用它。它检查新值是否不是 '' 然后它应该将输入字段向左滑动一点以为“清除”按钮出现腾出空间，但我只是不知道该怎么做。

这是我的。

<div class="searchbox">
    <input type="text" ng-model="search" ng-change="filterHeaders()"
           ng-focus="changeSearchValue()" ng-blur="changeSearchValue()" />
    <button id="clearSearch">x</button>
</div>

请忽略 ng-stuff，但我把它留在这里，所以没有问题如何调用该函数。它是从 Angular 调用的。

$('#clearSearch').hide();
searchButton = function() {
    if($('.searchbox input').val() !== '') {
        if($('#clearSearch:hidden')) {
            $('.searchbox input').stop().animate(
                {marginRight: 20},
                {queue: false, duration: 500}
            );
            $('#clearSearch').stop().fadeIn(500);
        }
    }
};

但是，当然，它并没有像我希望的那样工作。它首先向左跳，为按钮的出现留出空间，就像没有任何动画一样，然后才开始向左滑动 20px。

我知道，marginRight 不是实现此目的的方法，但我没有其他想法。你怎么看？

tldr:我想向左滑动输入以为按钮淡入腾出空间。同时。

这是一个fiddle of the problem .

Answer 1

您需要做的就是将清除按钮绝对定位，这样它就不会干扰其他元素:( Working jsFiddle )

.searchbox {
    float: right;
    position:relative;
}

.searchbox button{
    position: absolute;
    top:0; right:0;
}

此外，我会添加一个“动画”类或其他东西来判断输入当前是否正在动画。当前发生的情况是，当快速键入时，每次都会调用 .stop() 函数这会导致每次按键时出现短暂的“中断”。 Another jsFiddle to illustrate this .