javascript - 精简 jquery 焦点脚本？

Question

我有一个非常简单的 jQuery 脚本，当输入元素获得焦点时，它会将宽度扩展到 250px(使用 focusin() 事件)，当失去焦点时，它会缩小使用 focusout() 事件回到 200px。但我不确定我正在使用语法上最有效的代码来实现我想要实现的目标。这是我当前的代码:

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

然而，对我来说，这似乎不必要地笨重。我试过谷歌搜索，但我找不到正确的关键字来找到任何对我有帮助的结果。肯定有更简单的方法来实现这种效果，比如切换？我将如何实现这一目标？

Answer 1

我认为您所做的没有任何问题。如果您觉得自己重复得太多，可以将一些逻辑提取到 animateWidth 函数中:

$(document).ready(function() {

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

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

});