第一次动画执行后的问题答案

【问题标题】：Issue after the first animation execution第一次动画执行后的问题
【发布时间】：2017-02-02 11:04:39
【问题描述】：

我有一个触发动画的按钮。当我再次单击该按钮时，它会切换类，但动画后不透明度仍在我的代码中。

所有后续点击都会发生这种情况。我怎样才能解决这个问题？

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

【问题讨论】：

您的问题出在.css(opacity = "0")。将其更改为.css("opacity", "0")
'(opacity = "0")' 不是你想要的。

标签： jquery animation jquery-animate opacity

【解决方案1】：

问题来自.css(opcity = "0")，正如评论中提到的@Mohammad，只需修复此问题，您的代码就会正常工作：

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

【讨论】：

【解决方案2】：

您应该尝试bind 而不是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");
      }
    });

【讨论】：

虽然这似乎解决了问题，click( 不是 OP 原帖中的问题。