Для создания эффекта я использовал jquery функцию animate которая отлично справляется с плавным изменением длинны формы. Все что нум нужно сделать это при фокусе увеличить длинну формы, а при условии когда она потеряла фокус вернуть длину в исходную. Все очень просто переходим к коду:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
#search{
width:152px;
border:1px solid silver;
color:silver;
}
#search:focus{
width:152px;
border:1px solid silver;
color:black;
}
</style>
<script>
$(document).ready(function(){
$("#search").focus(function (){
$(this).animate({"width": "250px"}, 400);
});
$("#search").blur(function (){
$(this).animate({"width": "152px"}, 400);
});
});
</script>
<input type="text" name="search" id="search" value="Поиск...">
С помощью данного метода можно изменять не только длинну, но и ширину, прозрачность, позиции, отступы. Зато к сожалению нельзя плавно изменять цвет элемента.
Так же можно регулировать скорость анимации, в данном случае число 400 заменяем другим и смотрим на происходящее.
Все это элементарно, и думаю пояснений не требует. По сути можно было бы обойтись и одним CSS для такой задачи, но тогда эффекта плавного увеличения длинны нам было бы невидать. Возникнут вопросы пишите!
Комментарии
Тут нет ничего сложного просто несколко меняем css и с помощью флота прижимаем форму к правому краю.
Искал подобное решение и пришел к вам. Только мне нужно было, чтобы это увеличение было справа налево, так как поле поиска в правом верхнем углу.
Нашел решение здесь http://thefinishedbox.com/freebies/scripts/jquery-animated-search/.
Работает в ie8, moz 21, opera 12.11, chrome 27
в старших версиях не проверял.
Удачи!
RSS лента комментариев этой записи