Как реализовать, чтобы клику на иконку выползала форма поиска?

Question

[olya_097]

Как реализовать, чтобы клику на иконку выползала форма поиска?

Answer 1

[Максим]

https://pcvector.net/310-animirovannaya-poiskovaya...
https://nisnom.com/kollektsiya-form-poiska-dlya-sa...

Comments

[olya_097]

Максим Ленский, красота
Спасибо

Answer 2

[Кирилл Грачёв]

$('.search').click(function () {
		$('.search-field').stop().slideToggle();
		$('.search-field input[type=text]').focus();
	});

Comments

[olya_097]

Кирилл Грачёв, без html/css не особо так понятно
А зачем stop().slideToggle();?

[Mazino]

olya_097, вероятно для того, чтобы если пользователь решит заколоть кнопку курсором мыши в дуэли, не случалось каких-нибудь неприятных неожиданностей. .stop() прекращает все анимации на элементе.

[Кирилл Грачёв]

olya_097, https://jsfiddle.net/haLk78zv/

slideToggle() - плавно разворачивает\сворачивает intut поиска, stop() нужен для того что бы остановить текущую анимацию. К примеру пользователь очень быстро кликнул 10 раз на кнопку поиска, и поле будет плавно появляться и скрываться ровно 10 раз, а с stop() текущая анимация мгновенно будет прекращена и пользователь не будет наблюдать картину при которой поиск сам будет открываться и закрываться оставшиеся 5 раз хотя он уже ничего не кликает.