如何解决隐藏div时如何使用Jquery fadeOut
我希望在隐藏div时具有淡出效果以达到平滑效果。
我已经尝试了很多方法,但是每次它给我一个错误时,我都不知道该怎么做。谢谢!
HTML:
<div class="onboarding" id="onboarding">
<div class="onboarding-content"></div>
<div class="finish-btn customNavigation" id="finish-btn">
<button type="button" name="button">
<a class="btn next">
<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 1L7 13L1 7" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</button>
</div>
</div>
</div>
JS:
jQuery(document).ready(function($) {
if ($.cookie('hide-div')) {
$("#onboarding").remove();
}
$(".finish-btn").click(function() {
$("#onboarding").remove();
$.cookie('hide-div',true);
});
});
解决方法
这是实现jQuery .fadeOut()
方法的方式-请注意,在fadeOut完成后使用回调来删除div。
jQuery(document).ready(function() {
$(".finish-btn").click(function() {
$("#onboarding").fadeOut(700,function(){
$("#onboarding").remove();
//$.cookie('hide-div',true);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="onboarding">Onboarding DIV</div>
<button class="finish-btn">Hide Div</button>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。