fadein a DIV, когда щелкнули еще один DIV, затем затухание, когда снова щелкнули DIV

Question

У меня есть скользящая панель на моей странице, которая выводит навигацию (www.helloarchie.blue). Когда панель выйдет из окна, я хочу медленно затухать в содержимом, а затем затухать содержимое, когда пользователь щелкает значок, чтобы закрыть панель. Как мне это сделать?

CSS: (Div Я хочу FadeIn/из)

.sb-slidebar nav { text-align: left; } 

HTML:

<div class="sb-slidebar sb-right sb-style-push sb-active"> 

<nav> 
<div class="cl-effect-5 blah"> 
<a href="http://helloarchie.blue/"><span data-hover="Home">Home</span></a><br /> 
<a href="http://helloarchie.blue/about"><span data-hover="About">About</span></a><br /> 
<a href="http://helloarchie.blue/archives"><span data-hover="Archives">Archives</span></a><br /> 
<a href="http://helloarchie.blue/design"><span data-hover="Services">Services</span></a><br /> 
<a href="http://helloarchie.blue/contact-me" title="Contact Kaye at Hello Archie"><span data-hover="Contact me">Contact me</span></a><br /> 

</div> 
</nav> 
</div> 

HTML (это значок, я хочу, чтобы пользователь нажмите, чтобы открыть панель и FadeIn/из содержания)

<div class="sb-toggle-right button-square menu"> 

    <a id="menu-toggle" href="#" class="button2"> 
    <span class="menu-bar bar1"></span> 
    <span class="menu-bar bar2"></span> 
    <span class="menu-bar bar3"></span> 
    </a> 

</div>    

Answer 1

Использование JQuery-х .fadeToggle(), как в приведенном ниже примере. См. Документацию для .fadeToggle()here.

$(document).ready(function() { 
 
    $('#click-me').on('click', function() { 
 
    $('#fade-me').fadeToggle(); 
 
    }); 
 
});

#fade-me { 
 
    background-color: red; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: none; 
 
} 
 
#click-me { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="fade-me"></div> 
 
<div id="click-me">Toggle Fade</div>

Таким образом, применяя к вашему образцу кода, вы хотели бы что-то вроде этого:

$(document).ready(function() { 
    $('.sb-toggle-right').on('click', function() { 
     $('.sb-slidebar').fadeToggle(); 
    }); 
}); 

Answer 2

Глядя на имя класса вы использовали на DIV в вопросе выглядит вы используете плагин для обработки скользящих в/из панели? Не видя javascript, который вы используете, трудно точно сказать, что вы могли бы сделать, но я бы подумал, что если вы сможете получить доступ к документации плагина, вы сможете найти методы, используемые для запуска функций в начале и конце анимации/горка. В этих методах я добавлял/удалял имя класса моего собственного, которое обрабатывало бы затухание в и из div. Это будет выглядеть somehting так:

Javascript:

onSlideStart: function() { 
     $(this).removeClass('fade-me-in'); 
}, 
onSlideEnd: function() { 
     $(this).addClass('fade-me-in'); 
} 

CSS

div { 
    opacity: 0; 
} 

div.fade-me-in { 
    opacity: 1; 
    -webkit-transition: opacity 0.3s; 
    transition: opacity 0.3s; 
} 

Я надеюсь, что помогает, если нет, опубликовать JavaScript, который вы используете, и я могу быть в состоянии помочь в дальнейшем.