Штаб-квартира,
Я ищу, чтобы кнопка поиска "трансформировалась" в поле поиска.
Это то, что у меня есть до сих пор, но анимация супернадежна.
HTML
<div id='search'>
<span id='text'>Search</span><span id='field' style="display:none;"><input type="text" name="firstname"></input></span><a href='#' id='btn_go'>Go</a>
</div>
CSS
*{
margin: 0px;
padding:0px;
}
#search span {
padding: 15px;
display: block;
float: left;
}
#search {
background-color: #09F;
overflow: hidden;
float: left;
}
#btn_go {
background-color: #06C;
padding: 15px;
display: block;
float: left;
color: #FFF;
text-decoration: none;
}
JS
$( "#btn_go" ).click(function() {
$( "#text" ).fadeToggle( "slow", function() {
// Animation complete.
});
$( "#field" ).fadeToggle( "slow", function() {
// Animation complete.
});
});
Сценарий: http://jsfiddle.net/75DUC/
Абсолютное позиционирование решит вашу проблему. Вам нужно будет играть с значениями ширины и высоты, но вот приблизительное приближение того, что вы ищете: Fiddle
Обновлен CSS:
*{
margin: 0px;
padding:0px;
}
#search span {
padding: 15px;
display: block;
position: absolute;
}
#search {
background-color: #09F;
overflow: hidden;
height: 50px;
width:250px;
position:relative;
}
#text{
top:0;
left:0;
width: 150px;
}
#field{
top:0;
left:0;
}
#btn_go {
background-color: #06C;
padding: 15px;
display: block;
position: absolute;
top:0;
right:0;
color: #FFF;
text-decoration: none;
}
ОБНОВИТЬ:
Я обновил свою скрипту, чтобы включить расширяющееся окно поиска. Я использовал переходы CSS и немного дополнительного jQuery, чтобы заставить его работать.
Дополнительный jQuery:
var search = $('#search')
var width = search.width();
if(width == 125){
search.width('250px');
}
else{
search.width('125px');
}
Дополнительные CSS:
#search {
transition: width 0.5s linear;
}
Для достижения перекрестного затухания (перекрытие полей с текстом) установите #text
в position: absolute
.