Как сделать выпадающее меню как Яндексе?

Question

[2slide]

Как сделать появление меню как у Яндкса?
Плавное появление с легким выпадением.


Пробовал и вот что осталось.
Плавного появления нет, задержка и сразу появление.

$("#more").click(function(){
	$('.more_menu').fadeIn(500).css('display', 'block');
 });

Спасибо.

Comments

[Юрий Лобанов]

Автор, где реакция на ответ?

Answer 1

[Юрий Лобанов]

$('.more').click(function(){
  var menu = $('.menu');
  if (menu.css('display') == 'none') {
    menu.fadeIn(300);
  }
  else {
    menu.fadeOut(100);
  }
});

Пример:
codepen.io/iiil/pen/HEDeI

Answer 2

[Андрей Морозов]

Нельзя анимировать из display: none в display: block. Попробуйте через opacity и положение элемента.

Answer 3

[Sergei Chukhan]

Достаточно просто написать:

$("#more").click(function(){
	$('.more_menu').fadeIn('fast');
});

Элемент ".more_menu" должен быть изначально display:none;

Answer 4

[lnked]

$("#more").click(function(){
	$('.more_menu').fadeIn(500).css('display', 'block');
 });

в вашем примере, начинается фейд и не успев отработать пол секунды, элементу сразу приписывается display block
что бы этого не было сделайте так:

$("#more").click(function(){
	$('.more_menu').fadeIn(500, function(){
             $(this).css('display', 'block');
        });
 });

то есть дисплей блок пропишется только после того как пройдет анимация.

Answer 5

[Хабиб Омаров]

var moremenu = $('.more_menu');
moremenu.hide();
$("#more").click(function(){
	$('.more_menu').fadeIn(500);
 });

И все сделай переменную more_menu и скрой его через hide();, потом сделай через fadeIn(интервал). И все не нужно задавать css после fadeIn