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“欢迎”，然后将其永久隐藏。

对于post，我使用jQuery.cookie javascript的Cookie：

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

一切正常。唯一的问题是，我仍然想不出如何避免隐藏的div闪烁一秒钟，然后在用户关闭div“欢迎”后访问用户的网站时隐藏它们。有人可以帮我吗？

Answer 1

默认将其设置为“隐藏”，并在需要时显示。

$(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>

Answer 2

对于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>

注意：该演示将无法运行，因为堆栈片段iframe已被沙箱化。请仅使用代码并签入系统。

添加了Fully Working Code Demo。

用jQuery和cookie隐藏div无法正确隐藏

2 个答案:

解决方案