0

我有一个简单的 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——而是将输入的标准宽度硬编码为 200 像素。然而，我现在有一些输入需要 400px 宽，所以我没有为每个不同大小的元素添加额外的代码，而是简单地抓住被聚焦的宽度元素并将我的 50px 添加到它。

它确实有效，但是，我发现在大型表单上，当我以足够快的速度跨字段进行选项卡时，可以同时设置 2-3 个动画，活动元素之前的元素可以缩小到比其原始宽度更远，下降到 150 像素。

我相信我知道为什么会发生这种情况（elemWidth当我在输入之间切换时变量正在发生变化），但我不知道如何防止它。想法？

4

2 回答 2

2

发生的事情是，当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”:-)

于 2013-09-11T08:26:38.817 回答
1

我不确定，但您可以尝试删除您的 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);
  });
});
于 2013-09-11T08:26:20.660 回答