Скройте div с jquery и куки не прячутся

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 "welcome" только при первом посещении пользователем моего сайта, а затем скрыть его навсегда.

Для файлов cookieЯ использовал jQuery.cookie javascript, как предложено в этом посте :

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

Все прекрасно работает.Единственная проблема заключается в том, что я до сих пор не могу понять, как избежать мигания скрытого div на секунду, а затем скрыться, когда пользователи посещают мой сайт после закрытия div "welcome".Может ли кто-нибудь помочь мне с этим?

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>

Примечание: Демонстрация будет не работать, потому что стек фрагментов iframe помещен в песочницу,Пожалуйста, используйте код и зарегистрируйтесь в вашей системе.

Добавлен Демонстрация полностью рабочего кода .

Answer 2

По умолчанию присвойте ему attr "hidden" и просто покажите, когда вам нужно.

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