Clicking on Same button to Reverse Javascript effect

Question

So I am very very new to JavaScript and unfortunately I don't know the basics too well also.

I was working on a code to make an element hidden after clicking it and again reversing back the effect by clicking the same button but I am unable to do so. Please help me here is the code:

$(function() {
    $('#boxclose').click(function(){
        $('#md-share-window').animate({'bottom':'-90px'},500,function(){});
    });
});

Martin Schaer · Accepted Answer · 2013-05-23 18:18:06Z

1

You can use a class to identify the state of the element you are animating.

Here's an example: http://jsfiddle.net/FgDaq/

$('#boxclose').click(function() {
    var c = 'on',
        el = '#md-share-window',
        duration = 500;

    if ($(el).hasClass(c)) {
        $(el).animate({'bottom': 0}, duration)
            .removeClass(c);
    } else {
        $(el).animate({'bottom': '-90px'}, duration)
            .addClass(c);
    }
});

answered May 23, 2013 at 18:18

Martin Schaer

4,0261 gold badge26 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dhiraj Barnwal Over a year ago

Can I please know why duration = 500; was added ??

Martin Schaer Over a year ago

@user2414789 just as a good practice. Makes the code more maintainable and less prone to human-errors. If you ever want to change the animation durration, you have to change it only at one place.

colestrode · Accepted Answer · 2013-05-23 18:12:10Z

1

You'll need to get the initial position (or hard code it) and keep track of whether you are in the initial or updated position:

$(function() {
    var shareWindow = $('#md-share-window');
    var initialPosition = shareWindow.css('bottom'); //get initial position
    var atInitialPos = true; //whether this is the initial or updated position

    $('#boxclose').on('click', function(){
        var newPosition = atInitialPos ? '-90px' : initialPosition; //determines new position
        shareWindow.animate({'bottom': newPosition}, 500);
        atInitialPos = !atInitialPos; //toggle initial position boolean
    });
});

answered May 23, 2013 at 18:12

colestrode

10.7k3 gold badges32 silver badges43 bronze badges

Collectives™ on Stack Overflow

Clicking on Same button to Reverse Javascript effect

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related