我正在编写一个网站,我正在尝试复制
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;
- }
瞧,就是这样;)
