jQuery在点击时向左移动div然后向右移动div

Question

我有一个位于屏幕右侧的div（-190px）。当我点击另一个div（称为咖啡）时，我想要显示屏幕外的div，然后当我再次点击咖啡div时，我希望另一个div再次移出屏幕。

目前我的代码会在屏幕上移动它，然后立即退回。

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

我怎样才能让它停止直到我再次点击'span.coffee'？

Answer 1

试试这个

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;
    }
});

Answer 2

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