Question

我正在使用localstorage只显示一个div，尽管它的代码工作得很好，但我想知道如何将这个div（ #alert ）的可见性延迟1 -2秒（首次显示访问者），然后进行淡入，以免突然出现。

我的代码：

const showMsg = localStorage.getItem('showMsg');

if(showMsg === 'false'){
  $('#alert').hide();
}

$('.closebtn').on('click', function(){
  $('#alert').fadeOut('slow');
  localStorage.setItem('showMsg', 'false');
});

您可以在此处运行演示：

https://jsfiddle.net/0966x2dw/7/

我的问题有解决方案吗？

谢谢。

编辑：

对，对。我在#alert div上使用了CSS Transitions，现在好多了。谢谢。

https://jsfiddle.net/0966x2dw/23/

Answer 1

首先添加“显示：无；”给您的.alert。然后您可以执行以下操作：

if(showMsg === 'false'){
    $('.alert').hide();
} else {
    $('.alert').delay(1000).fadeIn();
}

这将导致您的警报div降低其下方的内容。您可能想使用slideDown（）使其不那么突然。

（请注意，如果您的警报对您的用户而言至关重要，则应进行调整，以确保该警报只对一小部分使用Java技术的用户显示。）

本地存储以及如何延迟div可见性

1 个答案: