Javascript 细化jquery焦点脚本？

我有一个非常简单的jQuery脚本，当一个输入元素被聚焦时，它会将其宽度扩展到250px（使用

focusin（）

事件），当焦点丢失时，它会使用

focusout（）

事件收缩回200px。但我不确定我是否使用了语法效率最高的代码来实现我的目标。这是我目前的代码：

$(document).ready(function() {
    $('input').focus(function() {
        $(this).animate({
            width: "250px"
        }, 500);
    });
    $('input').focusout(function() {
        $(this).animate({
            width: "200px"
        }, 500);
    });
});

---

然而，在我看来，这似乎是不必要的庞大。我试着在谷歌上搜索，但我无法找到正确的关键词来找到任何对我有帮助的结果。当然有一种更简单的方法来实现这种效果，比如开关？我将如何实现这一点

我看你所做的没有错。如果您觉得自己重复太多，您可能会将一些逻辑拉入

animateWidth

函数：

$(document).ready(function() {

    function animateWidth(element, width) {
        element.animate({ width: width }, 500);
    }

    $('input').focus(function () { animateWidth($(this), '250px'); })
              .focusout(function () { animateWidth($(this), '200px'); });

});

---

你能发布你的html代码吗？这似乎有效me@maxisam这没有什么问题，我在问，这是否是实现上述目标的最有效的语法方法。哈哈，我错过了全部内容。如果仍在开发中，或计划在将来编辑此代码，最好保持原样。您希望将来能够编辑可读、可理解的代码。如果您想优化生产版本的代码，最好使用缩小工具。如果你的目标是减小js文件的大小，那么它将缩短函数名和变量。你可以在这个函数名和变量名上使用更短的函数名和变量名来进一步减少混乱，尽管在开发阶段不建议这样做。虽然您没有明确指出，但是通过将方法链接在一起，您的代码更加紧凑。这种方法似乎比我目前使用的方法更通用。我假设它也可以更容易地扩展到其他元素。干杯在我看来，公共函数实际上并没有为您节省任何东西。不管怎样，最初是一个函数调用。现在，调用一个公共函数只是为了调用原始函数。