Question

我有一个网格宽度动态框，如果输入值被更改，则在父鼠标左键中，框会调整大小。等同调整大小并不完整，但出于这个问题的目的，它有效。

在框中添加等于100的任何内容，例如：40 10 10 10 30或50 50 0 0 0 http://jsfiddle.net/MT4Fp/16/

$('ul').on('mouseleave', function (event) {

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

    });


});

我遇到的问题是，在mouseleave上，即使你没有改变任何动画开始动画的东西，你可以在进入/离开网格时看到这个，网格的大小会改变几秒钟。如果输入被更改，我怎么能运行动画？我尝试过，键入，更改和其他一些方法，但无法让它工作。主要的是动画仅在网格离开时触发，如果发生了变化。

任何帮助表示赞赏。谢谢！

Answer 1

好的，评论不是很大。

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

另外，您可以考虑定位元素，例如$（'ul'）。on（'mouseleave'，'。i'，....）对不起，我编辑了。如果是更改，请添加到i var。

的值

Answer 2

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

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

除非更改值，否则jquery animate不会触发

2 个答案: