Question

我有一个简单的jQuery滑动输入片段，当输入元素被聚焦以使其更宽时，它会动画化输入元素的宽度：

$(document).ready(function() {
  $('input:not([type="checkbox"], .button, .noanimate)').focus(function() {
    var elemWidth = $(this).width();
    $(this).animate({
        width: elemWidth + 50,
    }, 300);
  });
  $('input:not([type="checkbox"], .button, .noanimate)').focusout(function() {
    var elemWidth = $(this).width();
    $(this).animate({
        width: elemWidth - 50,
    }, 300);
  });
});

直到最近，我还没有使用变量elemWidth - 而是我将输入的标准宽度硬编码为200px。但是我现在有一些输入需要400px宽，所以不是为每个不同大小的元素添加额外的代码，而是简单地抓住正在聚焦的宽度元素并将其添加到其中。

它确实有效，但是，我发现在大型表格上，当我足够快地跨越字段以便2-3可以同时制作动画时，活动之前的元素可以比原始宽度缩小，直到150像素。

我相信我知道为什么会发生这种情况（变量elemWidth正在改变，因为我在输入中选项卡），但我不知道如何防止它。想法？

Answer 1

当focus触发时，它开始为div设置动画，让我们说从200px到250px。所以它是200px，201px，202px。然后，很快，focusout触发。 focusout检查元素的宽度，当前为202px，然后开始将其从202px设置为152px，这是当前宽度减去50.所以，这就是它的下降到150px。

如果新动画接管，你需要做的是stop动画，并跳转到动画的结尾，这正是jQuery的stop函数所做的。 http://api.jquery.com/stop/

因此，您的focus和focusout动画函数应如下所示：

$(this).stop(true, true);
var elemWidth = $(this).width();
$(this).animate({
    width: elemWidth + 50 + "px",
}, 300);

.stop(true, true)将停止当前动画，清除动画队列，并将动画推进到最后。然后新的动画功能将接管。

此外，您应该确保将width设置为“px”： - ）

Answer 2

我不确定，但你可以尝试删除你的var：

$(document).ready(function() {
  $('input:not([type="checkbox"], .button, .noanimate)').focus(function() {
    $(this).animate({
        width: $(this).width()+ 50,
    }, 300);
  });
  $('input:not([type="checkbox"], .button, .noanimate)').focusout(function() {
    $(this).animate({
        width: $(this).width()- 50,
    }, 300);
  });
});

使用变量时，jQuery动画会影响兄弟输入元素吗？

2 个答案: