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

另一个想法是，你也不需要从你的回调中返回该功能，尽管它与你的问题无关。

提交表单字段后的动画

1 个答案: