Witajcie, mam problem z animacją wysuwania paneli po obu stronach strony. Wysuwanie i chowanie
menu_panel odbywa się bez zastrzeżeń i z animacją toggle-slide ale wysuwanie
apps_panel jest już bez animacji slide i dodatkowo kliknięcie
apps_transparent_bg nie powoduje schowania się
apps_panel . Czy to jakiś błąd w kodzie?
$( document ).ready(function() {
$("#menu-icon").click(function(){
$("#menu_transparent_bg").fadeIn();
$("#menu_panel").toggle( "slide");
});
$("#menu_transparent_bg").click(function(){
$("#menu_transparent_bg").fadeOut();
$("#menu_panel").toggle( "slide");
});
$("#apps-icon").click(function(){
$("#apps_transparent_bg").fadeIn();
$("#apps_panel").toggle( "slide" , "right" );
});
$("#apps_transparent_bg").click(function(){
$("#apps_transparent_bg").fadeOut();
$("#apps_panel").toggle( "slide" , "right");
});
});
<div id='menu-icon'>
<img src="
<?PHP echo base_url
(); ?>application/images/ic_menu_24px.svg"/>
</div>
<div id='apps-icon'>
<img src="
<?PHP echo base_url
(); ?>application/images/ic_apps_24px.svg"/>
</div>
<div id='menu_transparent_bg'>
</div>
<div id='apps_transparent_bg'>
</div>
<div id='menu_panel'>
</div>
<div id='apps_panel'>
</div>
#menu_transparent_bg {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
z-index: 98;
background-color:rgba(0,0,0,0.4);
display:none;
}
#menu_panel {
top: 0px;
left: 0px;
position: fixed;
background: #EEE;
height: 100%;
width: 300px;
z-index: 99;
display:none;
}
#apps_panel {
top: 0px;
right: 0px;
position: fixed;
background: #EEE;
height: 100%;
width: 500px;
z-index: 99;
display:none;
}
#apps_transparent_bg {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
z-index: 98;
background-color:rgba(0,0,0,0.4);
display:none;
}