Question

我的页面上有一个滑动面板，可以显示导航（www.helloarchie.blue）。当面板滑出时，我想慢慢淡入内部内容，然后在用户单击图标关闭面板时淡出内容。我该怎么做？

CSS :( div我想淡出/退出）

.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（这是我希望用户点击以打开面板并淡出/淡出内容的图标）

<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。它看起来像这样：

使用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，我可能会进一步提供帮助。

单击另一个DIV时淡化DIV，然后再次单击DIV时淡出淡出

2 个答案: