Jquery animation in toggle style

Question

Jquery animation in toggle style

Navigation

#1 by (2 votes)

1

When you click a button a div appears with the effect rising to the top, with Jquery. I need to click it again to disappear with the opposite animation - descending. Since I understand little of JS, I could only do it with two different buttons.

Is there a way to do this, in the style of a toggle with just one button?

My code so far:

$(".lyricshow").click(function () {    
    $(".lyricscreen").show()
    .animate({top:0}, function() {});
});
$(".lyricsclose").click(function () {    
    $(".lyricscreen").hide()
    .animate({bottom:0}, function() {});
});

jquery jquery-animate

asked by anonymous 05.04.2018 / 19:55

1 answer

My POST is not sending anything Component with same height

score 2 · Accepted Answer

You can use .slideToggle , which is much simpler for these cases than animate . See:

$(".lyricbutton").click(function(){    
    $(".lyricscreen").slideToggle();
});

.lyricscreen{
   position: absolute;
   left: 0;
   bottom: 0;
   display: none;
   background: yellow;
   height: 100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonclass="lyricbutton" style="margin-left: 50px;">Abrir/Fechar</button>
<div class="lyricscreen">
   Olá!
</div>