Javascript 提交表单字段后的动画

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

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

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

---

提前感谢。

您需要防止表单在提交时出现默认行为。触发事件处理程序后，事件对您可用<代码>设置动画功能还采用速度参数

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

---

另一种想法是，您也不需要从回调返回函数，尽管它与您的问题无关。

您如何提交表单？只需按enter键即可。

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