所以我有一个函数,当输入的值改变时调用它。 它检查新值是否不是 '' 然后它应该将输入字段向左滑动一点以为“清除”按钮出现腾出空间,但我只是不知道该怎么做。
这是我的。
<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 .
最佳答案
您需要做的就是将清除按钮绝对定位,这样它就不会干扰其他元素:( Working jsFiddle )
.searchbox {
float: right;
position:relative;
}
.searchbox button{
position: absolute;
top:0; right:0;
}
此外,我会添加一个“动画”类或其他东西来判断输入当前是否正在动画。当前发生的情况是,当快速键入时,每次都会调用 .stop()
函数这会导致每次按键时出现短暂的“中断”。 Another jsFiddle to illustrate this .
关于javascript - jQuery:动画元素为出现的另一个元素留出空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31437205/