Javascript 用按钮前后移动div

在使用JQuery的

.animate

使div左右移动时，我遇到了一个看不到的问题。我是这个网站开发的新手，所以我请求您的帮助

以下是文件：

$（文档）.ready（函数（）{
$（“#导航按钮”）。单击（函数（）{
$（此）.data（'clicked'，true）；
});
如果（$（“#导航按钮”）。数据（'点击'）{
$（“#导航菜单”）。设置动画({
左：“200”
}, 500);
}否则{
$（“#导航菜单”）。设置动画({
左：“0”
}, 500);
}
});
html{
位置：相对位置；
身高：100%；
背景色：#6e6e；
}
#容器{}.nav按钮{
位置：绝对位置；
页边顶部：-2px；
左边距：7px；
宽度：32px；
高度：自动；
z指数：1；
}
.导航菜单{
背景色：#4242；
位置：绝对位置；
顶部：0px；
左：0px；
宽度：200px；
身高：100%；
}
.标志{
位置：相对位置；
顶部：250px；
左：0；
右：0；
底部：0；
保证金：自动；
宽度：225px；
}
.标志h3，
h1{
文本对齐：居中；
字体系列：Sansita One；
颜色：#222；
文本阴影：0px 2px 3px#555；
}
.标志h1{
利润底部：3倍；
}
.标志h3{
边缘顶部：2倍；
}
.悬停旋转：悬停{
-ms变换：旋转（-170度）；
-webkit变换：旋转（-170度）；
-moz变换：旋转（-170度）；
-o变换：旋转（-170度）；
变换：旋转（-170度）；
}

曼努埃尔·佩佩试验
曼努埃尔·佩佩
试验
试试这个：

$(document).ready(function(){
    var $navButton = $('#nav-button'),
        $navMenu = $('#nav-menu'),
        transitioning = false;

    $navButton.click(function(){
        var $this = $(this);
        $this.data('clicked', !$this.data('clicked'));

        if(!transitioning) {
           transitioning = true;
           if($navButton.data('clicked')) {
             $navMenu.animate({left: '200'}, 500, function(){
                 transitioning = false;
             });
           } else {
             $navMenu.animate({left: '0'}, 500, function(){
                 transitioning = false;
             });
           }
        }
    });
});

如果希望它在单击时响应，则动画逻辑需要位于单击事件处理程序内部。另外，您每次都将“clicked”数据属性设置为true，这样它就不会改变。这用作切换：

$(this).data('clicked', !$(this).data('clicked'));

您应该只使用一个
来切换它<代码>将值更改为等效的布尔值，但不会更改其真实性。谢谢！！我可以再问一个问题吗？如果我反复单击按钮，它将不断更改其位置，直到达到我单击的次数。我怎样才能防止这种情况？