使用 jquery 隐藏 div 和 cookie 未正确隐藏

Question

所以我正在使用这个脚本：

$(document).ready(function() {
  if ($.cookie('noShowWelcome')) $('.welcome').hide();
  else {
    $("#close-welcome").click(function() {
      $(".welcome").fadeOut(1000);
      $.cookie('noShowWelcome', true);
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/carhartl/jquery-cookie/master/src/jquery.cookie.js"></script>

<div class="welcome">
</div>

仅在用户第一次访问我的网站时显示“欢迎”div，然后将其永久隐藏。

对于我使用 jQuery.cookie javascript 的 cookie，正如 post 中所建议的那样：

https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js

一切都很好。唯一的问题是我仍然无法弄清楚如何避免隐藏的 div 闪烁一秒钟然后在用户关闭 div“欢迎”后访问我的网站时隐藏。有人可以帮我吗？

Answer 1

对于 FOUC，您需要做的是使用一个小脚本将所有内容从 CSS/Properties 转换为 JavaScript。对于不支持hidden属性的浏览器，可以使用：

$(function () {
  $(".hide-me-by-js").hide().removeClass("hide-me-by-js");
  // Write your other conditional logic here...
});

.hide-me-by-js {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hide-me-by-js">Initially Hidden</div>

如果您想利用新的 hidden 属性（以浏览器兼容性为代价），请使用以下内容：

$(function () {
  $("[hidden]").hide().removeAttr("hidden");
  // Write your other conditional logic here...
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div hidden>Initially Hidden</div>

解决方案

在您的情况下，通常是这样的：

$(function() {
  $(".hide-me-by-js").hide().removeClass("hide-me-by-js");
  // Write your other conditional logic here...
  if ($.cookie('noShowWelcome'))
    $('.welcome').hide();
  else {
    $('.welcome').show();
    $("#close-welcome").click(function() {
      $(".welcome").fadeOut(1000);
      $.cookie('noShowWelcome', true);
    });
  }
});

.hide-me-by-js {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/carhartl/jquery-cookie/master/src/jquery.cookie.js"></script>
<div class="hide-me-by-js welcome">Initially Hidden</div>

注意：演示将不工作，因为堆栈 sn-ps iframe 已被沙盒化。请使用代码并检查您的系统。

添加了Fully Working Code Demo。

Answer 2

默认情况下将其属性设置为“隐藏”，并在需要时显示它。

$(document).ready(function() {
    if (!$.cookie('noShowWelcome')){
        $('.welcome').show();
        $("#close-welcome").click(function() {
           $(".welcome").fadeOut(1000);
           $.cookie('noShowWelcome', true);    
        });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="welcome" style="display:none;">
Welcome
  </div>