提交表单字段后的动画

Question

我的HTML中有一个带有表单字段的div容器：

<div class="flex_item" id="b_one">
    <form id="f_one">
         <input id="i_one" type="text">
    </form>
</div>

现在，我试图通过在输入字段中写入请求的颜色来更改div的backgroundcolor：

$(document).ready(function(){
    $("#f_one").submit(function () {
        var input = $("i_one").val();
        $("#b_one").animate({left: '75px', width: '-150px'}, callbackColor('#b_one', '#i_one', input));
    });
});
function callbackColor(container, i_number, color) {
    return function () {
        $(container).css('background-color', color);
        $(i_number).css('background-color', color);
        $(container).animate({left: '75px', width: '300px'});
    }
}

我的问题是，当我使用提交事件处理程序时，动画不起作用。 有人知道如何解决吗？

提前致谢。

Answer 1

提交时，您需要防止表单的默认行为。 触发事件处理程序后，您可以使用一个事件。 animate功能还需要一个速度参数。

$(document).ready(function(){
    $("#f_one").submit(function (event) {
        event.preventDefault();
        var input = $("#i_one").val();
        $("#b_one").animate({left: '75px', width: '-150px'}, 1000, callbackColor('#b_one', '#i_one', input));
    });
});

function callbackColor(container, i_number, color) {
    $(container).css('background-color', color);
    $(i_number).css('background-color', color);
    $(container).animate({left: '75px', width: '300px'});
} 

再想一想，尽管它与您的问题无关，但您也不需要从回调中返回该函数。