苹果风格扩展菜单栏中的搜索字段

Question

我正在编写一个网站,我正在尝试复制apple.com上的效果,当你点击将搜索字段集中在菜单栏中时,搜索字段会扩展,菜单栏的其余部分会收缩以适应它.

我一直在尝试使用jquery kwicks的各种技巧,也只是在jquery中使用animate函数扩展文本字段但效果却不一样.如果有人能让我走上正轨,我会非常感激!

最好的丹尼尔

Answer 1

这可以通过css完成,不需要javascript或任何东西......

#search input {
 width: 100px;
 -moz-transition: width 0.5s ease-out;
 -webkit-transition: width 0.5s ease-out;
 transition: width 0.5s ease-out;
}
#search input:focus {
 width: 200px;
 -moz-transition: width 0.5s ease-out;
 -webkit-transition: width 0.5s ease-out;
 transition: width 0.5s ease-out;
}

瞧,就是这样;)

Answer 2

不要过度简化事情，但是如果在你的 css 中你 float:right; 该怎么办？这个输入框，然后在焦点上将框动画到适当的宽度，如下所示：

CSS：

#inputtext{
    float:right;
    width:150px;
}

jQuery：

$("div#inputtext").focus(function(){
   $(this).animate({width:'300px'}, 1000);
});