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

fadeout jquery