javascript - 在 div 和幻灯片内容之间切换

Question

我想在 div 之间切换并从每个 div 中滑入一些内容，我试图重新创建的外观是 Helbak 上的导航。网站。

我能够在 div 之间切换，这很好，但让 div 滑动、切换和淡入淡出是我需要帮助的地方。如果您看到 Helbak 网站上的示例，我希望我的动画能够以同样的方式工作。我试图让它工作，但我无法让它像helbak一样工作。

这是我的 HTML 片段:

  <div class="navbar__menu__item navbar__menu__item--products">
        <a class="navbar__menu__item--js" href="#" data-target=".navbar__menu__dropdown--products">products <span><i class="fa fa-angle-down"></i></span></a>
  </div>

 <div class="navbar__menu__dropdown navbar__menu__dropdown--js navbar__menu__dropdown--products">
   <ul>
      <li><a href="">Link 1</a></li>
      <li><a href="">Link 2</a></li>
      <li><a href="">Link 3</a></li>        
   </ul>
 </div>

这是我的 JS:

//Menu Dropdown
$(".navbar__menu__item--js").click(function () {
    var $target = $($(this).data('target'));
    $(".navbar__menu__dropdown--js").not($target).slideUp();
    $($target).fadeToggle();        
});

我添加了jsfiddle显示它当前的工作原理。

Answer 1

我已经设法接近你想要的东西了

https://jsfiddle.net/yc5bxu1f/1/

但是，您可能想退一步并放弃迄今为止所做的事情。由于 Helback 使用 CSS 过渡。

https://css-tricks.com/almanac/properties/t/transition/

让您了解他们所做的事情。他们将 ul 内容隐藏在 Canvas 顶部:-20em；或类似的并将不透明度设置为 0。

然后，当您单击实际菜单项 .navbar__menu__item 时。它将 ul 的类切换为开放状态。我建议使用“active”这个词。

所以你的 CSS 看起来像这样。

.navbar__menu__item {
  /* Set up the style of the DIV and set it to transparent by default (depending on your Javascript support)*/
  opacity:0;
  background-color:#ddd;
  transition: opacity 0.5s ease-out;
}

.navbar__menu__item.active {
  /* When a user clicks it make the div fadein */
  opacity:1;
  transition: opacity 0.5s ease-in;
}

.navbar__menu__item > ul {
  /* hide the content of the ul menu off canvas */
  top:-20em;
  opacity:0;
  transition: all 0.5s ease-out;
}

.navbar__menu__item.active > ul {
  /* when the div is active this declaration should then have the effect of sliding down and fading in */
  top:0;
  opacity:1;
  transition: all 0.5s ease-in;
}

您还可以将其与延迟结合起来，以便在 div 淡入后在滑入菜单项之前暂停。

这里的核心思想是元素的状态是在 CSS 中定义的，而 Javascript 所做的只是使用事件标志切换每个元素。对于内存力和你自己的理智来说，这是一种更好的方法。

js 看起来像这样。

$(function(){
  var $menuItem = $('.navbar__menu__item');

  $menuItem.each(function(){
    var $this = $(this)
    $this.on('click', function(){
      $this.addClass('active')
    })
  })
})