当属性改变时使用 fadeIn

Question

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

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

改变条件

 if (collapse.attr('style', 'display:block !important'))

与以下

if (collapse.attr('style')=='display:block !important')

Answer 2

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

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

当属性改变时使用 fadeIn

Use fadeIn when attribute has changed

javascript

jquery

togglebutton