我正在编写一个网站,我正在尝试复制
apple.com上的效果,当您单击以将搜索字段集中在菜单栏中时,搜索字段会扩展,菜单栏的其余部分会缩小以适应它.
我一直在尝试使用jquery kwicks的各种技巧,也只是在jquery中使用animate函数扩展文本字段但效果却不一样.如果有人能让我走上正轨,我会非常感激！
最好
丹尼尔
解决方法
这可以通过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;
}
瞧,就是这样;)