javascript - 属性更改时使用fadeIn

当我单击切换按钮时，它将元素的样式属性从不显示变为块。现在，当发生这种情况时，我想为菜单的左侧位置设置动画。我有这样的代码，但工作时遇到问题，而且当它应该返回到右侧时，它也会出现在左侧。

var toggled = false;
$(toggleBtn).click(function() {
    toggled = !toggled;
    $(collapse).attr("style", toggled ? 'display:block !important' : 'display:none !important');
    if (collapse.attr('style', 'display:block !important')) {
        $(collapse).animate({left:'10%'});
    } else {
        $(collapse).animate({left:'100%'});
    }
});

任何帮助，将不胜感激，谢谢。

最佳答案

您可以将其简化为：

var toggled = false;
$(toggleBtn).click(function() {
    toggled = !toggled;
    $(collapse).toggle(toggled)
               .animate({ left: $(collapse).is(':visible') ? '10%' : '100%' });
});