Рушится печенье с помощью jQuery

Question

Вот что я хочу сделать - запустить серию анимаций jQuery при первом посещении моего сайта.

Я хочу сделать это, используя стандартные вызовы jQuery для анимации и jQuery Cookie.Плагин для регистрации, посещали ли они раньше.

Большая часть того, что я хочу, работает с этим кодом:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery.cookie('visited', 'no', { expires: 14 });
    var visited = jQuery.cookie('visited');
    if (visited == 'no') {
         jQuery("#navigation-wrap").delay(500).animate({ 
      marginLeft: "0px"
      }, 500 );
   jQuery('.page-navigation').delay(1000).slideToggle(400);
   jQuery('.page-navigation').delay(1000).slideUp(300);
   jQuery("#navigation-wrap").delay(2000).animate({ 
      marginLeft: "-180px"
      }, 500 );     
       }
     jQuery.cookie('visited', 'yes');
 });
</script>

Но, хотя значение Cookie равно после посещения меняют значение "да", анимации все равно запускаются, если я обновляю страницу ...

Answer 1

Вы устанавливаете cookie на «Нет» каждый раз, когда страница перезагружается с этой строкой:

jQuery.cookie('visited', 'no', { expires: 14 });

Затем, когда ваш оператор if проверяет, является ли значение «нет», он возвращает истину, потому что вы буквально изменили его на «нет» на 2 строки выше.

Сначала вам нужно будет проверить наличие файла cookie, а затем поместить его.

Пример

Как только jQuery запускает событие готовности документа, вы выполняете следующий фрагмент кода:

jQuery.cookie('visited', 'no', { expires: 14 });

Устанавливает для visited cookie значение 'no'. После того, как вы установили cookie, вы извлекаете его и проверяете, равно ли это значение 'no', каковым оно сейчас является.

var visited = jQuery.cookie('visited');
if (visited == 'no') {
    ...
}

И после оператора if вы устанавливаете значение visited cookie в 'yes'. Но как только вы перезагрузите страницу, мы снова вернемся к первому шагу, потому что значение visited cookie возвращается к значению 'no'.

Answer 2

Спасибо Кевину за указание на это и @Johnnyb на CSS-tricks.com

Этот код работает как требуется:

    <script type="text/javascript">
    jQuery(document).ready(function() {
        var visited = jQuery.cookie('visited');
        if (visited == 'yes') {
            return false;
        } else {
             jQuery("#navigation-wrap").delay(500).animate({ 
          marginLeft: "0px"
          }, 500 );
       jQuery('.page-navigation').delay(1000).slideToggle(400);
       jQuery('.page-navigation').delay(1000).slideUp(300);
       jQuery("#navigation-wrap").delay(2000).animate({ 
          marginLeft: "-180px"
          }, 500 );     
           }
         jQuery.cookie('visited', 'yes', { expires: 7 });
     });
 </script>

Спасибо за вашпомогите, ребята!