// JavaScript Document $(window).on("load", function() { console.log("Load complete!"); //------------------------------------------------------------ //画面サイズの取得 //------------------------------------------------------------ function getSizing(){ var sw = $(window).width();//画面横幅 var sh = $(window).height();//画面高さ var s = { sw:$(window).width(), sh:$(window).height() } //console.log("width = " + s["sw"] + ", height = " + s["sh"] ); return s; } //============================================================ // //リサイズイベント完了待ち関数(iPhone対策) // //============================================================ var timer = false; var execResize = function(e){ if (timer !== false) { clearTimeout(timer); } timer = setTimeout(function() {// リサイズが終了した時点で行う処理または関数を記述 var sld = $("#dr_Menu"); var s = getSizing();//画面サイズの取得 sld.css("width", s["sw"] + "px");//メインメニューの横幅リサイズ }, 200); } //============================================================ // //画面がリサイズされたとき // //============================================================ $(window).on("resize", function(){ execResize(); }); opn = false; var size = getSizing();//画面サイズの取得 var dviceWith = size["sw"];//横幅のサイズを取得 /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ // // CSS transitionでの制御 // /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ var sld = $("#dr_Menu"); var hdm = $("#hd_Menu"); var clb = $("#btclose_up, #btclose_low"); sld.css("right", "-" + dviceWith + "px");//メインメニューの位置初期化 sld.css("width", dviceWith + "px");//メインメニューの横幅初期化 $(document).on("click", "#hd_Menu", function() {//表示ボタン押下したら //console.log("Click complete!"); var menuOpenStep00 = {"display" : "block"} var menuOpenStep01 = { "visibility" : "visible" } var menuOpenStep02 = { "right" : "0", "transition" : "right 0.2s linear", "-webkit-transition" : "right 0.2s linear", "-moz-transition" : "right 0.2s linear", "-o-transition" : "right 0.2s linear", "-ms-transition" : "right 0.2s linear" } //console.log(sld.css("right")); var h = sld.height(); //console.log("height : " + h); if(opn === false){ sld.css(menuOpenStep00); sld.css(menuOpenStep01); sld.css(menuOpenStep02); $("body").addClass("noScroll"); opn = true; } }); $(document).on("click", "#btclose_up, #btclose_low", function() { var menuCloseStep00 = { "right" : -dviceWith, "transition" : "right 0.2s linear", "-webkit-transition" : "right 0.2s linear", "-moz-transition" : "right 0.2s linear", "-o-transition" : "right 0.2s linear", "-ms-transition" : "right 0.2s linear" } var menuCloseStep01 = { "visibility" : "hidden" } var menuCloseStep02 = {"display" : "none"} console.log(sld.css("right")); if(opn === true){ sld.css(menuCloseStep00); sld.on('oTransitionEnd mozTransitionEnd webkitTransitionEnd transitionend', function () {//アニメーション完了後 sld.css(menuCloseStep01);//高さ位置合わせ&非表示解除 sld.css(menuCloseStep02);//左へ移動 $("body").removeClass("noScroll"); opn = false; sld.off('oTransitionEnd mozTransitionEnd webkitTransitionEnd transitionend');//アニメーション完了後イベント設定解除 }); } }); });