Как включить .animate функцию jQuery - PullRequest
Новая
       101

Как включить .animate функцию jQuery

0 голосов
/ 21 марта 2020

Я ищу способ переключения анимации при нажатии с помощью функции .animate (я ищу решение, которое не переключает класс css)

Что я пытаюсь Для этого необходимо открыть меню наложения, открываемое кнопкой (.about), которое переключает анимацию #header id с ширины 90px на 100% ширины, а затем анимирует обратно на ширину 90px для закрытия

В настоящее время анимация будет только играть один раз на клик 

$(".about").click(function () {

    $("#header").animate({
        width: '100%'
    }, 1000);

    $('footer').addClass("show");

    $("footer").animate({
        opacity: 1
    }, 300);

});


$("footer").click(function () {


     $("footer").animate({
        opacity: 0
     }, 300);


    $("#header").animate({
        width: '90px'
    }, 1000);

});

У кого-нибудь есть какие-либо предложения или рекомендации для этого?

1 Ответ

2 голосов
/ 21 марта 2020

Вы могли бы использовать старый метод переключения , который принимает несколько дескрипторов и зацикливает их при каждом щелчке. Но, поскольку он устарел, лучшим вариантом для достижения этой цели будет проверка ширины, а затем установка соответствующего значения. Другой альтернативой является использование toggleClass 

$("#test").click(function() {
  $(this).animate({
    width: $(this).width() == 90 ? '100%' : 90,
  });
});
div {
  background: red;
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="test">
  Test DIV
</div>
...