jQuery - サイドパネルがクッキーを使用してページの読み込みを行う

Question

私は、スライド内で/ outパネルのために取り組んでいるスクリプトを持っています。私はjQuery Cookieを組み込んでいます。私はそれをローカルでテストするときにうまく動作しますが、パネルを読み込んだり再読み込みしたり、パネルを読み込んだりしてすぐにシャットダウンすると、ページロード時にクッキーをシャットダウンすることができます。 Fiddle

$(function() { 
if ($.cookie('myCookieName')) { 
    $('#slideClick').click(); 
} 
}); 

$('#slideClick').click(function() { 
var it = $(this).data('it') || 1; 
switch (it) { 
    case 1: 
     $(this).parent().animate({ right: '-345px' }, { queue: false, duration: 500 }); 
     $(".slideClose").addClass('hideBtn'); 
     $(".slideOpen").removeClass('hideBtn'); 
     break; 
    case 2: 
     $(this).parent().animate({ right: '-0px' }, { queue: false, duration: 500 }); 
     $(".slideOpen").addClass('hideBtn'); 
     $(".slideClose").removeClass('hideBtn'); 
     break; 
} 
it++; 
if (it > 2) it = 1; 
$(this).data('it', it); 
$.cookie('myCookieName', '1') 
}); 

おかげ

Answer 1

OnLoadでは、divの位置を隠すように最初に設定する必要があります。その後、onClickイベントでは、スイッチのケースを逆にする必要があります。 Fiddleを参照してください。

$(function() { 
     $('#slideOut').css('right','-345px');   
     if ($.cookie('myCookieName')) { 
      $('#slideClick').click(); 
     } 
    }); 

    $('#slideClick').click(function() { 
     var it = $(this).data('it') || 1; 
     switch (it) { 
     case 2: 
      $(this).parent().animate({ 
      right: '-345px' 
      }, { 
      queue: false, 
      duration: 500 
      }); 
      $(".slideClose").addClass('hideBtn'); 
      $(".slideOpen").removeClass('hideBtn'); 
      break; 
     case 1: 
      $(this).parent().animate({ 
      right: '0px' 
      }, { 
      queue: false, 
      duration: 500 
      }); 
      $(".slideOpen").addClass('hideBtn'); 
      $(".slideClose").removeClass('hideBtn'); 
      break; 
     } 
     it++; 
     if (it > 2) it = 1; 
     $(this).data('it', it); 
     $.cookie('myCookieName', '1') 
    }); 

注： - -0pxにを削除します。

Answer 2

$（ '＃slideClick'）を呼び出すことで。（クリック）、あなたは0.5秒を要した、アニメーション化することを指示しています。代わりに、あなたはすぐにこのような何かを行うことによって、パネルを非表示にすることがあります。あなたはunstyledコンテンツのフラッシュを回避したい場合

$(function() { 
    if ($.cookie('myCookieName')) { 
     $('#slideOut').css('right','-345px'); 
    } 
}); 

Answer 3

、CSSセレクタ#slideOutにプロパティright: -345px;を追加することを検討してください。こうすることで、jQueryがロードされてclick()メソッドが呼び出される前に、分断された秒間ユーザーがそれを見ないようになります。