jquery - 切换动画，还是添加一个类？

Question

我正在忙于创建一个小的滑出式菜单。我遇到问题是因为我现在意识到 .animate() 不可切换。

所以我计划创建一个 CSS 类并使用 .cssToggle() 代替，但这并没有动画效果。

为了使用相同的图标再次关闭菜单，使此类可切换的正确方法是什么？

$( ".menu span" ).click(function() {
 $( ".menu" ).animate({
     left:0
  }, 500, function() {
  })
})

这是一个JSFiddle .

Answer 1

当菜单移到左侧且不可见时，您可以隐藏菜单，当您再次单击它时，检查它是否可见，然后执行相应的操作:

$( ".menu span" ).click(function() {

var menu = $('.menu');

if($(menu).is(':visible')){
 $(menu).animate({
     left:0
  }, 500, function() {
      $(menu).hide();
  })
}else{


$(menu).show(function(){
   $(menu).animate({left:200},500);

})


});

我还没有测试过代码，但我想逻辑应该可行..