How can i do 2 different animation events like close or open with animate() just with one button(this button rotate to open and close too)?
please can someone help me? I'm trying to do an animation. This animation consisting of 2 elements:
1.-
Button
(glyphicon-plus-sign from Bootstrap)
2.- and a
Box-Content
with width:12% .
when we click on the button, it rotates to negative direction and at the same time open the Box-Content width:40% with animate() which is custom animation from jQuery.
Now my Problem is: i don't really know, how to return the
Box-Content
to the original width
which is 12%
and at the same time rotate again the
button
to positive direction. here is the jQuery code:
$(document).ready(function(){ function showNav(){ $('.glyphicon-plus-sign').toggleClass('animate-open-button'); $('.wrapper').animate({ width:'40%' },{ queue:false, duration:3000 }) $('nav ul li a').css('opacity','1'); } function hideNav(){ $('.glyphicon-plus-sign').toggleClass('animate-close-button'); $('.wrapper').animate({ width:'12%' },{ queue:false, duration:3000 }) $('nav ul li a').css('opacity','0'); } $('.glyphicon-plus-sign').on('click', function(){ // if (hideNav()) { showNav(); // }else{ // hideNav(); // } }); })
i wrote already 2 functions. the showNav() rotate the button and show my content navigation. Second function should hide the content again.
here is my html:
<div class="wrapper container-fluid"> <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> <div class="col-xs-12 col-sm-12 col-md-12 main-nav"> <nav> <ul> <li><a href="">site1</a></li> <li><a href="">site2</a></li> <li><a href="">site3</a></li> <li><a href="">site4</a></li> </ul> </nav> </div> </div>
here you can see this animation better, to understand what i mean.
I appreciate very much every Help. thank-you!