Nick
Nick

Reputation: 2549

jQuery - Different function on second click

I'm trying to create a curtain Opening & Closing effect. But for some reason I can't make my curtains close once they're opened.

Here's what I have so far: http://jsfiddle.net/ssc3z1tf/

I've tried quite a few different ways, adding and removing classes, toggling classes and here I've used rels.

$(document).ready(function () {
             $('.curtain').click(function(){
                if ($('.curtain').attr('rel', 'open')){
                        $('.curtainLeft').animate({"left":"-400px"}, "slow");
                        $('.curtainRight').animate({"right":"-400px"}, "slow");
                        $('.curtain').attr('rel', 'closed');

                    } else if ($('.curtain').attr('rel', 'closed')){

                        $('.curtainLeft').animate({"left":"-0px"}, "slow");
                        $('.curtainRight').animate({"right":"-0px"}, "slow");
                        $('.curtain').attr('rel', 'open');
                    }
            });
        });

Any help would be great! I'm lost! Thanks!!

Upvotes: 1

Views: 125

Answers (1)

Stryner
Stryner

Reputation: 7318

Change

if ($('.curtain').attr('rel', 'open')){

to

if ($('.curtain').attr('rel') == 'open') {

And do the same for the second if statement. The .attr(name, value) will always set the attribute to the specified value, whereas .attr(name) will simply return the value

Updated Fiddle

Upvotes: 5

Related Questions