Problem nach der ersten Ausführung der Animation

Question

Ich habe eine Schaltfläche, die eine Animation auslöst. Wenn ich erneut auf die Schaltfläche klicke, wird die Klasse umgeschaltet, aber die Deckkraft ist nach der Animation immer noch in meinem Code.

Dies geschieht für alle folgenden Klicks. Wie kann ich das beheben?

$("#menu-button").click(function() { 
    $("#right-sidebar").toggleClass("display"); 

    if($("#right-sidebar").hasClass("display") == false){ 
     $("#right-sidebar").css(opacity = "0"); 
    } else { 
     $("#right-sidebar").animate({ 
      opacity: "1" 
     }, "slow"); 
    } 
}); 

Answer 1

Das Problem kommt von .css(opcity = "0") als @Mohammad im Kommentar erwähnt, nur dieses Problem beheben und Ihr Code funktioniert:

$("#menu-button").click(function() { 
 
    $("#right-sidebar").toggleClass("display"); 
 

 
    if(!$("#right-sidebar").hasClass("display")){ 
 
    $("#right-sidebar").css("opacity", "0"); 
 
    } else { 
 
    $("#right-sidebar").animate({ 
 
     opacity: "1" 
 
    }, "slow"); 
 
    } 
 
});

#right-sidebar{ 
 
    width:80%; 
 
    height: 100px; 
 
    float: right; 
 
    background-color: green; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="btn btn-lg btn-primary" id="menu-button">menu</button> 
 

 
<div id='right-sidebar' class="display">right sidebar</div>

Answer 2

Sie sollten versuchen, bind statt click

$("#menu-button").bind("click", function() { 
     $("#right-sidebar").toggleClass("display"); 

     if($("#right-sidebar").hasClass("display") == false){ 
     $("#right-sidebar").css("opacity","0"); 
     } else { 
     $("#right-sidebar").animate({ 
        opacity: 1 
       }, "slow"); 
     } 
    });