放大类似于 Apple.com 上的搜索框答案

【问题标题】：Magnify search box similar to that on Apple.com放大类似于 Apple.com 上的搜索框
【发布时间】：2011-04-12 04:20:14
【问题描述】：

如果您转到http://apple.com 并单击搜索框，您会注意到它会增大/放大onfocus，而onblur 它会折叠回原来的状态。

我想知道是否有一个 jquery 插件或类似的插件可以轻松完成这项工作。

我不想使用 Apple 网站上的 JS，因为它不是完全跨浏览器的。我也没有时间自己动手。如果没有任何预先构建的东西，那没关系，但如果有人知道任何预先构建的东西，我将非常感激。

【问题讨论】：

注意：仅适用于 webkit 浏览器。
是的，我看到 Apple 网站上的那个仅适用于 FireFox、Safari 和 Chrome。我正在寻找更多跨浏览器的东西。

标签： javascript jquery

【解决方案1】：

没有 JS 的 apple.com 上的搜索框： http://www.kvadracom.com/en-projects-blog.html#1

【讨论】：

伟大的无 JavaScript 解决方案

【解决方案2】：

已经有一段时间了，这是另一个 SO 帖子：

Mimic apple.com globalsearch input field with HTML and CSS

【讨论】：

是的，我确实看到了这个问题。答案显示了 Apple 网站的 JS，不幸的是，它仅适用于 FireFox、Safari 和 Chrome。我正在寻找更多跨浏览器的东西。

【解决方案3】：

我猜你想要这样的东西。它在 IE、firfox、chrome 中工作。我没有检查其他人

$('input').focus(function() {
         $(this).css({'width': '50px'});
});

$('input').blur(function() {
         $(this).css({'width': '100px'});
 });

同样你可以使用 background-color 属性来切换颜色

-- 由 OP 编辑 ---

我将此标记为答案，但我确实将其修改为更像 Apple 网站。

$('input').focus(function() {
         $(this).animate({width: 150}, 'slow');
});

$('input').blur(function() {
         $(this).animate({width: 100}, 'slow');
 });

【讨论】：

【解决方案4】：

看看这篇文章，我觉得对你有一定的帮助......搜索框点击时没有获得焦点，但它的大小增加......http://www.bloggermint.com/2011/06/css3-search-box-inspired-by-apple-com/

【讨论】：

请注意，link-only answers are discouraged，SO 答案应该是寻找解决方案的终点（与另一个中途停留的参考相比，它往往会随着时间的推移变得陈旧）。请考虑在此处添加独立的概要，并保留链接作为参考。

-- 由 OP 编辑​​ ---

-- 由 OP 编辑 ---