jquery - jQuery在单击时向左移动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;
});