javascript – 动画不能使用jquery后的addClass

使用jquery无法正常工作后的addClass.

当我点击一个按钮时,我试图从下往上显示横幅,当用户再次点击时,它将返回到底部并隐藏起来.

下面是我到目前为止的代码.
第一部分有效,但第二部分没有滑下来……简直就是消失了.

任何帮助表示赞赏.

谢谢!

$(document).ready(function() {

  $("#projs").click(function() {
    if ($("#projList").hasClass('hideAway')) {
      $("#projList").removeClass('hideAway').animate({
        bottom: '25%'
      });
    } else {
      $("#projList").animate({
        bottom: '0'
      }).addClass('hideAway'); //.addClass('hideAway');
    }

  });


});
.hideAway {
  visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="projs" value="Some Projects" style="border:none;border: 2px solid #e7e7e7;"></input>
<div id="projList" style="width:100%;position:absolute;bottom:0;" class="hideAway">
  <table style="margin:0px;width:100%;padding:0px;">
    <tr>
      <td bgcolor="#EA664A" align="center" height="75" width="75">
      </td>
      <td bgcolor="#D8B90C" align="center" height="75" width="75">
      </td>
    </tr>
    <tr>
      <td bgcolor="#0CD836" align="center" height="75" width="75">
      </td>
      <td bgcolor="#1AD8E3" align="center" height="75" width="75">
      </td>
    </tr>
  </table>
</div>

jsfiddle link

最佳答案
您必须在完成动画后添加课程.

$("#projList").animate({bottom:'0%'},function(){$(this).addClass('hideAway')})
$(document).ready(function(){
  $("#projs").click(function(){
    if($("#projList").hasClass('hideAway')) 
      $("#projList").removeClass('hideAway').animate({bottom: '20%'});
    else
      $("#projList").animate({bottom:'0%'},function(){$(this).addClass('hideAway')})
  });
});
.hideAway {
    visibility:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="button" id="projs" value="Some Projects" style="border:none;border: 2px solid #e7e7e7;"></input>
<div id="projList" style="width:100%;position:absolute;bottom:0;" class="hideAway"> 
  <table style="margin:0px;width:100%;padding:0px;">
    <tr>
      <td bgcolor="#EA664A" align="center" height="75" width="75"></td>
      <td bgcolor="#D8B90C" align="center" height="75" width="75"></td>
    </tr>
    <tr>
      <td bgcolor="#0CD836" align="center" height="75" width="75"></td>
      <td bgcolor="#1AD8E3" align="center" height="75" width="75"></td>
    </tr>
  </table>    
</div>

注意:使用整页查看结果.

转载注明原文:javascript – 动画不能使用jquery后的addClass - 代码日志