Блог старого компьютера

Блог старого компьютера


Главная Jquery Анимация формы поиска на jquery

Анимация формы поиска на jquery

09.01.2013 04:00 Администратор Jquery
Печать PDF
Как обычно по утру зайдя на своб почту от яндекса я увидел новое оформление. Само оформление меня не привлекло, но понравилась как у них при фокусе форма поиска увеличивала свою длинну. И решил я в одном из своих проектах использовать нечто подобное. Для написания данной анимации я использовал jquery, что сократило написание кода до нескольких минут.

Для создания эффекта я использовал  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 для такой задачи, но тогда эффекта плавного увеличения длинны нам было бы невидать. Возникнут вопросы пишите!

Комментарии  

 
0 #2 Administrator 05.08.2013 05:46
Цитирую Алекс:
Приветствую.
Искал подобное решение и пришел к вам. Только мне нужно было, чтобы это увеличение было справа налево, так как поле поиска в правом верхнем углу.

Нашел решение здесь http://thefinishedbox.com/freebies/scripts/jquery-animated-search/.
Работает в ie8, moz 21, opera 12.11, chrome 27
в старших версиях не проверял.

Удачи!


Тут нет ничего сложного просто несколко меняем css и с помощью флота прижимаем форму к правому краю.
Цитировать
 
 
0 #1 Алекс 23.06.2013 13:59
Приветствую.
Искал подобное решение и пришел к вам. Только мне нужно было, чтобы это увеличение было справа налево, так как поле поиска в правом верхнем углу.

Нашел решение здесь http://thefinishedbox.com/freebies/scripts/jquery-animated-search/.
Работает в ie8, moz 21, opera 12.11, chrome 27
в старших версиях не проверял.

Удачи!
Цитировать
 

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?