细化jquery焦点脚本？

我有一个非常简单的jQuery脚本，当输入元素集中时，它将其宽度扩展到250px（使用focusin()事件），当焦点丢失时，使用focusout()事件将焦点缩回到200px。但我不确定我正在使用语法上最有效的代码来实现我想实现的目标。这是我目前的代码：细化jquery焦点脚本？

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

对我而言，这似乎不必要的庞大。我尝试过使用Google搜索，但无法找到任何有助于我的结果的关键字。当然有一种更简单的方法来达到这样的效果，如切换？我将如何实现这一目标？

来源

2012-01-01 ReactingToAngularVues

你能发布你的html代码吗？它似乎对我有用 – maxisam 2012-01-01 07:25:21

@maxisam它没有什么问题，我在问是否是实现上述目标的语法最有效的方法。 – ReactingToAngularVues 2012-01-01 07:27:18

大声笑，我想念整个事情。 – maxisam 2012-01-01 07:28:13

我没有看到你所做的事情没有错。如果你觉得自己在重复自己太多，你可能会将一些逻辑推出animateWidth函数：

$(document).ready(function() { 

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

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

});

来源

2012-01-01 07:29:05

尽管在开发阶段它不可取，但你可以用更短的函数和变量名称来进一步减少混乱。 – Joseph 2012-01-01 07:32:09

+1。尽管您没有明确指出，但只需将方法链接在一起，代码就更加紧凑。 – nnnnnn 2012-01-01 07:32:20

这种方法看起来比我目前使用的方法更通用。我假设它也可以更容易地扩展到其他元素。干杯! – ReactingToAngularVues 2012-01-01 07:34:50

细化jquery焦点脚本？

回答

相关问题