Jquery animation in toggle style

Asked

Viewed 407 times

1

By clicking a button one div appears with the effect going up to the top, with Jquery. I need that when clicking again it goes away with the opposite animation - going down. As I know little about JS, I could only do it with two different buttons.

There’s a way to do it, in the style of a toggle with only 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

  • Thiago da para fazer com apenas 1 botão e CSS, esse mesmo efeito! Sem jQuery nem JS, se quer eu posto um exemplo na resposta.

1 answer

2


Can use .slideToggle, which is much simpler for these cases than animate. Behold:

$(".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>
<button class="lyricbutton" style="margin-left: 50px;">Abrir/Fechar</button>
<div class="lyricscreen">
   Olá!
</div>

Browser other questions tagged jquery jquery-animate

You are not signed in. Login or sign up in order to post.