动画后的 addClass 无法与 jquery 正常工作。
当我点击一个按钮时,我试图让横幅从下往上,当用户再次点击时,它会回到底部并隐藏起来。
下面是我到目前为止的代码。
第一部分工作,但第二部分它不会滑下来......只是消失了。
任何帮助表示赞赏。
谢谢!
$(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 - 动画后的addClass不适用于jquery,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45094027/