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，但我把它留在这里，所以毫无疑问如何调用该函数。它是从角度调用的。

$('#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

您不想更改输入的位置，只需减小其width，因此为width 属性设置动画而不是任何边距。

这是一个运行示例，动画在两秒后开始。

$(function() {
  $('#clearSearch').hide();
  setTimeout(function() {
    animate();
  }, 2000);
});

function animate() {
  var input = $('.searchbox input');
  var newWidth = input.width() - 20;
  input.stop().animate({
    width: newWidth
  }, {
    queue: false, 
    duration: 500
  });
  $('#clearSearch').stop().fadeIn(500);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="searchbox">
    <input type="text" />
    <button id="clearSearch">x</button>
</div>

Answer 2

您需要做的就是将清除按钮置于绝对位置，以免干扰其他元素：(Working jsFiddle)

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

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

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

Answer 3

像这样使用绝对定位：

.searchbox {
   right:0;
   position: absolute;
}
#clearSearch {
   right:0;
   top:0;
   position: absolute;
}

这样，当按钮被渲染时，搜索框不会跳到左边，因为绝对定位不会影响其他 DOM 元素的定位，如 here 所述

这是一个有效的 jsfiddle：

http://jsfiddle.net/rktpw89p/5/

Answer 4

如果我理解正确，你想要做的是像这样运行你的第二个动画：

http://jsfiddle.net/rktpw89p/3/

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

                alert('first animation complete!');
                $('#clearSearch').stop().fadeIn(500);

            });

        }
    }
});

它正在等待第一个完成。