javascript - 当属性更改时使用 fadeIn

Question

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

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

如有任何帮助，我们将不胜感激，谢谢。

Answer 1

您可以将其进一步简化为:

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