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

您需要做的就是使清除按钮绝对定位，以免影响其他元素：（Working jsFiddle）

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

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

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

Answer 2

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

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);

            });

        }
    }
});

它正在等待第一个完成。

Answer 3

您不想更改输入的位置，只需减少其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 4

像这样使用绝对位置：

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

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

这是一个有效的jsfiddle：

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

jQuery：animate元素为另一个出现的空间提供空间

4 个答案: