addClass 之后的动画不能与 jquery 一起使用

Question

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 链接

Answer 1

完成动画后必须添加类。

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

注意：使用整页查看结果。

Answer 2

这是因为即使您链接了事件，它们也不会同步执行。 jQuery在一个"线程"中启动动画，并在另一个"线程"中设置hiddenAway类。因此，动画被覆盖。要解决此问题，只需添加延迟即可。

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

**编辑：**

Ehsan的回答可能更合适，所以你不需要知道动画时间。他的答案通过提供一个回调函数来工作，jQuery将在动画完成后应用该函数。这是一个完整的功能：

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

Answer 3

您可以使用 Animate 的回调函数来实现此目的

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

.hideAway {
visibility:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>

Answer 4

您可以通过实现以下内容来最小化代码：

$(document).ready(function() {
$("#projs").click(function() {
$("#projList").slideToggle().css("bottom", "25%").toggleClass("hideAway");
});
});

.hideAway {
display: none;
}

<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>

Answer 5

它无法按预期工作，因为链接在后面的函数在执行之前不会等待。它们都是一起执行的，不会等到上一个函数完成执行。

您可以在.animate中使用回调函数。

jQuery.animate的最后一个参数是回调函数。

回调函数将在父函数完成执行后执行。

jsFiddle 在这里。

$(document).ready(function() {
$("#projs").click(function() {
if ($("#projList").hasClass('hideAway')) {
$("#projList").removeClass('hideAway').animate({
bottom: '25%'
});
} else {
$("#projList").animate({bottom: '0'}, function(){
$(this).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>