첫 번째 애니메이션 실행 후 문제

Question

애니메이션을 트리거하는 버튼이 있습니다. 버튼을 다시 클릭하면 클래스가 토글되지만 애니메이션 후에 불투명도는 여전히 내 코드에 있습니다.

이는 모든 결과 클릭에 대해 발생합니다. 이 문제를 어떻게 해결할 수 있습니까?

:

$("#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

문제의 bind을 시도해야는이 문제를 해결하고 코드 것 잘 작동, 주석에서 언급 @Mohammad로 .css(opcity = "0")에서 온다

$("#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

대신 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"); 
     } 
    });