私のカスタムdivをクリックするとモバイルメニューパネルを閉じるには

Question

私は両方の機能に参加したいと思いますが、私はまだ多くのテストの後に正しい結果がありません。ここで

それは私が=>（fonctionはokです）オープン.menu_btnサイドパネルにクリックしたときに、それにreclickingときだから私が望むものを、ある

function myFunction(x) { 
x.classList.toggle("change"); 
} 
$(document).ready(function() 
{ 
var isMenuOpen = false; 

$('.menu_btn').click(function() 
{ 
    if (isMenuOpen == false) 
    { 
     $("#menu_smartphone").clearQueue().animate({ 
      left : '0px' 
     })    
    $("#grey_back").fadeIn('fast'); 
     $(".close").fadeIn(300); 

     isMenuOpen = true; 
    } 
});  
$('#grey_back').click(function() 
{ 
    if (isMenuOpen == true) 
    { 
     $("#menu_smartphone").clearQueue().animate({ 
      left : '-200px' 
     }) 
     $("#page").clearQueue().animate({ 
      "margin-left" : '0px' 
     })    
    $("#grey_back").fadeOut('fast'); 
     $(this).fadeOut(200); 

     isMenuOpen = false; 
    } 
}); 
}); 

（isMenuOpenサンプルコードを使用しています= true）、サイドパネルを閉じます。 #grey_back

にクリックした場合にのみ、このコードで 、サイドパネルは、近いここでは、私はあなたのコードを簡素化し、アニメーションを最適化するために、あなたをお勧めします=> https://jsfiddle.net/vsfogccy/

Answer 1

デモです。 transform: translate()は、あなたのケースのように静的な位置をアニメーション化するのに、はるかにスムーズに機能します - leftプロパティ。

var isGreyInvisible = true; 
 
$('.menumobile').click(function() { 
 
    if (isGreyInvisible) { 
 
    $('#grey_back').fadeIn(); 
 
    isGreyInvisible = false; 
 
    } else { 
 
    $('#grey_back').fadeOut(); 
 
    isGreyInvisible = true; 
 
    } 
 
    $('#menu_smartphone').toggleClass('open'); 
 
    $('.bar1').toggleClass('change1'); 
 
    $('.bar2').toggleClass('change2'); 
 
    $('.bar3').toggleClass('change3'); 
 
}); 
 

 
$('#grey_back').click(function() { 
 
    $('#menu_smartphone').removeClass('open'); 
 
    $('#grey_back').fadeOut(); 
 
    isGreyInvisible = true; 
 
    $('.bar1').removeClass('change1'); 
 
    $('.bar2').removeClass('change2'); 
 
    $('.bar3').removeClass('change3'); 
 
});

/* Menu mobile */ 
 

 
* { 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 0; 
 
} 
 
#menu_smartphone { 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    transform: translateX(-250px); 
 
    bottom: 0; 
 
    padding-top: 30px; 
 
    width: 250px; 
 
    transition: all 1s ease; 
 
    color: webkit-box-shadow: inset 0px 7px 5px -5px rgba(0, 0, 0, 0.5); 
 
    -moz-box-shadow: inset 0px 7px 5px -5px rgba(0, 0, 0, 0.5); 
 
    box-shadow: inset 0px 7px 5px -5px rgba(0, 0, 0, 0.5); 
 
    background: rgb(230, 230, 230); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e6e6e6', endColorstr='#ffffff', GradientType=0); 
 
    background: -moz-linear-gradient(top, rgba(230, 230, 230, 1) 0%, rgba(249, 249, 249, 1) 25%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(230, 230, 230, 1)), color-stop(25%, rgba(249, 249, 249, 1))); 
 
    background: -webkit-linear-gradient(top, rgba(230, 230, 230, 1) 0%, rgba(249, 249, 249, 1) 25%); 
 
    background: -o-linear-gradient(top, rgba(230, 230, 230, 1) 0%, rgba(249, 249, 249, 1) 25%); 
 
    background: -ms-linear-gradient(top, rgba(230, 230, 230, 1) 0%, rgba(249, 249, 249, 1) 25%); 
 
    background: linear-gradient(to bottom, rgba(230, 230, 230, 1) 0%, rgba(249, 249, 249, 1) 25%); 
 
} 
 
#menu_smartphone ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    color: #999999; 
 
} 
 
#menu_smartphone ul li { 
 
    height: 70px; 
 
    padding-left: 10px; 
 
    line-height: 70px; 
 
} 
 
#menu_smartphone ul li:hover { 
 
    background: #f7f7f7; 
 
} 
 
#menu_smartphone ul li a { 
 
    color: #999999; 
 
    text-decoration: none; 
 
    font-family: 'Roboto'; 
 
    font-weight: 400; 
 
    font-size: 25px; 
 
} 
 
#grey_back { 
 
    display: none; 
 
    background-color: #000000; 
 
    opacity: 0.7; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
.card { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #ffffff; 
 
    margin: 10px; 
 
    padding: 20px; 
 
    color: #666666; 
 
    font-weight: 300; 
 
    font-size: 36px; 
 
    text-align: center; 
 
    font-family: 'Roboto'; 
 
} 
 
/* Menu animé en css */ 
 

 
.menumobile { 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    position: fixed; 
 
    z-index: 100000; 
 
    top: 10px; 
 
    left: 10px; 
 
    z-index: 100000; 
 
} 
 
.bar1, 
 
.bar2, 
 
.bar3 { 
 
    width: 35px; 
 
    height: 5px; 
 
    background-color: #333; 
 
    margin: 6px 0; 
 
    transition: 0.4s; 
 
} 
 
/* Rotate first bar */ 
 

 
.change1 { 
 
    -webkit-transform: rotate(-45deg) translate(-9px, 6px); 
 
    transform: rotate(-45deg) translate(-9px, 6px); 
 
} 
 
/* Fade out the second bar */ 
 

 
.change2 { 
 
    opacity: 0; 
 
} 
 
/* Rotate last bar */ 
 

 
.change3 { 
 
    -webkit-transform: rotate(45deg) translate(-8px, -8px); 
 
    transform: rotate(45deg) translate(-8px, -8px); 
 
} 
 
.open { 
 
    transform: translateX(0) !important; 
 
    transition: all 1s ease; 
 
} 
 
.visible { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="menumobile menu_btn"> 
 
    <div class="bar1"></div> 
 
    <div class="bar2"></div> 
 
    <div class="bar3"></div> 
 
</div> 
 
<div id="grey_back">&nbsp;</div> 
 
<div id="menu_smartphone" class="menu_mobile_app closed" align="left"> 
 
    <ul style="overflow-y:auto;"> 
 
    <li><a href="#">MENU 1</a> 
 
    </li> 
 
    <li><a href="#">MENU 2</a> 
 
    </li> 
 
    <li><a href="#">MENU 3</a> 
 
    </li> 
 
    <li><a href="#">MENU 4</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<div class="card"></div>