Javascript jquery animate不激发，除非值被更改

我有一个网格宽度的动态框，在父鼠标上，如果输入值改变，框会重新调整大小。Equal resize不完整，但就本问题而言，它是有效的

在方框中添加等于100的任何内容，例如：401010030或5050

$（'ul'）。在（'mouseleave'，函数（事件）{
var elems=$（this.find（'input'）；
各要素（功能（要素，i）{
$（this）.parent（）.parent（）.animate({
宽度：$（this）.val（）+“%”
}, 500);
if（$（this.val（）1）{
$（this.parent（）.parent（）.removeClass（'hidden'）；
}
});
});

我的问题是，在mouseleave上，即使你不改变动画开始动画的任何内容，当你进入/离开网格时，你可以看到这一点，网格的大小会改变几秒钟。

---

如何仅在输入更改时运行动画？我尝试过，按键，改变和其他一些方法，但无法让它工作。主要的一点是，动画只在网格离开时触发，如果有什么改变的话

---

感谢您的帮助。谢谢大家!

您希望为值更改而不是“mouseleave”设置动画。因此，使用此方法可以更改绑定值

jQuery('input[type="text"]').on('input', function() {
    // do work such as  animate ...
    console.log($(this).val()); // i tried with this and get value
})

---

好吧，一个评论不是很重要

var i = $("#inputid").val();
$('ul').on('mouseleave', function (event) {
    if ($("#inputid").val() == i){return true;}
    EDITED: i = $("#inputid").val();
    var elems = $(this).find('input');
    elems.each(function (el, i) {
        $(this).parent().parent().animate({
            width: $(this).val() + '%'}, 500);
            if ($(this).val() <= 1) {
                $(this).parent().parent().addClass('hidden');
            } else if ($(this).val() > 1) {
                $(this).parent().parent().removeClass('hidden');
            }
    });
});

var i=$（“#inputid”）.val（）；
$（'ul'）。on（'mouseleave'，函数（事件）{
if（$（“#inputid”）.val（）==i{return true；}
编辑：i=$（“#inputid”）.val（）；
var elems=$（this.find（'input'）；
各要素（功能（要素，i）{
$（this）.parent（）.parent（）.animate({
宽度：$（this.val（）+'%'}，500）；
if（$（this.val（）1）{
$（this.parent（）.parent（）.removeClass（'hidden'）；
}
});
});

也可以考虑目标元素，比如$（UL）。（“MouSeleave'，' i '，……”）

---

对不起，我编辑了。如果是更改，则添加到i变量的值。

您不能将输入值缓存到变量中，并将动画放入If。。。检查？我也试过了，在数组中添加了值，但没有起作用，做了同样的事情吗？不，实际上我必须在父MousElevate上设置动画，否则在输入值时它会改变宽度。你的问题是“如果输入发生变化，我如何才能运行动画？”。所以你应该用value change event绑定，而不是mouseleave。，这不是吗（？）请不要只看问题的标题，还要看解释。我添加了代码示例，因此理解我需要的内容应该不那么困难。几乎，它在第二次传递时再次捕获动画。你改变一次，输入/输出，然后再次出现，但我看到你让atI选择你的，因为它让我走到了正确的轨道，我所做的是输入记录值，在离开时将它们与记录值匹配，如果它们不同于动画和记录新值

var i = $("#inputid").val();
$('ul').on('mouseleave', function (event) {
    if ($("#inputid").val() == i){return true;}
    EDITED: i = $("#inputid").val();
    var elems = $(this).find('input');
    elems.each(function (el, i) {
        $(this).parent().parent().animate({
            width: $(this).val() + '%'}, 500);
            if ($(this).val() <= 1) {
                $(this).parent().parent().addClass('hidden');
            } else if ($(this).val() > 1) {
                $(this).parent().parent().removeClass('hidden');
            }
    });
});