Как реализовать плавную трансформацию выпадающих элементов меню при нажатии на кнопку?

Question

[ElRom]

Есть меню со скрытыми элементами (display: none), которое появляется при нажатии на кнопку. Хочу добавить трансформацию, но никак не соображу, как правильно её настроить на jQuery.

Вот голый код без стилизации:

<button class="button button_close" type="button">КНОПКА</button>
  
<li class="nav_hidden">
  <a class="link">
    Пункт 1
  </a>
</li>

<li class="nav_hidden">
  <a class="link">
    Пункт 2
  </a>
</li>

<li class="nav_hidden">
  <a class="link">
    Пункт 3
  </a>
</li>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio beatae repellendus fuga ut veniam cupiditate mollitia sed officiis illum cumque dolore sint ipsum itaque, voluptatibus ab consectetur. Totam, sapiente, minus.</p>

.nav_hidden {
  display: none;
}
li {
  margin: 30px;
  list-style: none;
}
p {
  display: block;
  transform: scaleY(1);
}
p:hover {
  transform: scaleY(1.8);
  transition: transform .7s ease;
  cursor: pointer;
}

var open = function() {

$("li").toggleClass("nav_hidden");
$("a").css({"transform" : "scaleY(1)", "transition" : "transform .7s ease"});
};

$(".button").click(open);


Добавила "p" и "p:hover" для наглядности того, чего хочу от пунктов меню. При нажатии на кнопку, должна произойти трансформация пунктов меню при его раскрытии (только из "transform: scaleY(0)" в "transform: scaleY(1)").

Answer 1

[aftar]

Попробуй так
$('#tourReadmore5-4').click(function() {
$('.tour-readmore-5-4').slideToggle('slow');
});
$('#tourReadmoreClose5-4').click(function() {
$('.tour-readmore-5-4').slideToggle('slow');
});

Только задай выпадающему элементу display:none

Comments

[ElRom]

Немного не то, но навели на нужные мысли) Ваш пример возьму на заметку, спасибо)