我想在一定時間后自動淡入div onclick和淡出div

Question

其實我的問題是，我想在click事件時fadein一個div ，並在一定時間后自動fadeout該div 。

我做了一些事情，但是fadeout功能不起作用。 這是我的片段：

 .alert-box { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; display: none; padding: 20px 0; background-color: red; color: #fff; } .close { position: absolute; right: 10px; top: 10px; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>click me</button> <div class="alert-box"> <span class="close">&times;</span> <div class="content"> sample content </div> </div> <script type="text/javascript"> $(document).ready(function() { $('button').click(function() { $('.alert-box').fadeIn('fast'); }); if ($('.alert-box').css('display') == 'block') { $('.alert-box').delay(1000).fadeOut('fast'); } }); </script> 

Answer 1

將setTimeout用於1秒后的淡出

setTimeout (() => {
    $('.alert-box').fadeOut('fast');
}, 1000)

也刪除了不必要的代碼。

 .alert-box { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; display: none; padding: 20px 0; background-color: red; color: #fff; } .close { position: absolute; right: 10px; top: 10px; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>click me</button> <div class="alert-box"> <span class="close">&times;</span> <div class="content"> sample content </div> </div> <script type="text/javascript"> $(document).ready(function() { $('button').click(function() { $('.alert-box').fadeIn('fast'); setTimeout(() => { if ($('.alert-box').css('display') == 'block') { $('.alert-box').delay(1000).fadeOut('fast'); } }, 1000); }); }); </script> 

Answer 2

您可以在帶有延遲速度的fadeIn()之后fadeIn()使用fadeOut() 。

 $(document).ready(function() { $('button').click(function() { $('.alert-box').fadeIn('fast').delay(1000).fadeOut('fast'); }); }); 

 .alert-box{ position: absolute; left: 0; right: 0; bottom: 0; width: 100%; display: none; padding: 20px 0; background-color: red; color: #fff; } .close{ position: absolute; right: 10px; top: 10px; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>click me</button> <div class="alert-box"> <span class="close">&times;</span> <div class="content"> sample content </div> </div>