Search jQuery

jQuery Forum

Screen name:
Olivia Panther

Olivia Panther's Profile

1 Posts

4 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

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)?

[8Replies]

25-Sep-2016 05:36 PM
Forum: Using jQuery

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.

Link: Mobile-navigation-jsfiddle or here: http://codepen.io/Alanes/pen/NRpXOj

I appreciate very much every Help. thank-you!

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend