細化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焦點腳本？

回答

相關問題