Utilisation de fadeIn lorsque l'attribut a changé

Question

Lorsque je clique sur le bouton bascule, l'attribut de style de l'élément est remplacé par none. Maintenant, quand cela arrive, je veux animer la position gauche du menu. J'ai le code comme ça, mais fonctionne buggy et aussi, quand il devrait revenir à la droite, il apparaît sur la gauche ..

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

Toute aide serait appréciée, je vous remercie.

Answer 1

Vous pouvez simplifier plus que:

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

Answer 2

changer la condition

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

avec les éléments suivants

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