隐藏 div 时如何使用 Jquery fadeOut

Question

我想在 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);
});

});

Answer 1

下面是如何实现 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>

隐藏 div 时如何使用 Jquery fadeOut

How to use Jquery fadeOut when hiding a div

jquery

fadeout