CODEWITHSUNDEEP
jqueryjquery-animateright-to-left
Sam Skirrow
Sam Skirrow

Reputation: 3697

jQuery move div left on click then right on click

I have a div that sits just off the right of my screen (-190px). When I click another div (called coffee) I want the offscreen div to appear, then when I click the coffee div again, I want the other div to move offscreen again.

Currently my code moves it on screen then immediately back off.

$('span.coffee').click(function(){
    $('.quick_contact').animate({'right' : '0px'});
});
$('span.coffee').click(function(){
    $('.quick_contact').animate({'right' : '-190px'});
});

How can I make it so that it stops until I click on 'span.coffee' again?

Upvotes: 0

Views: 5389

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

$('div.coffee').click(function () {
    $('.quick_contact').stop().animate({
        right: this.flag ? 0 : -190
    });
    this.flag = !this.flag;
});

Upvotes: 0

Anton
Anton

Reputation: 32591

Try this

var toggle = false;
$('span.coffee').on('click', function () {
    if (toggle == false) {
        $('.quick_contact').stop().animate({
            'right': '0px'
        });
        toggle = true;
    } else {
        $('.quick_contact').stop().animate({
            'right': '-190px'
        });
        toggle = false;
    }
});

Upvotes: 3

Related Questions