1

试图让这个菜单滑入然后在单击关闭按钮时滑出。由于某种原因，我无法让它滑出。

    jQuery(function($){
    $('#menu-open').click(function() {
        $('#slider-background').toggleClass('section-transform-active');
        $('#slider-menu').toggleClass('menu-container-active');
    });
    $('#menu-close').click(function() {
        $('#slider-background').toggleClass('section-transform-active');
        $('#slider-menu').toggleClass('menu-container-active');
    });
});

/button>



<div id="slider-background" class="section-transform">
      <button id="menu-close" style="float:right">X CLOSE</button>
  <div id="slider-menu" class="menu-container">
  <ul>
  <li>MENU ITEM 1</li>
    <li>MENU ITEM 2</li>
      <li>MENU ITEM 3</li>
        <li>MENU ITEM 4</li> 
  </ul>
  </div>
</div>

.section-transform {
    cursor: pointer;
  opacity: 0;
  -webkit-transition: width 1s ease;
    -moz-transition: width 1s ease;
    -o-transition: width 1s ease;
    -ms-transition: width 1s ease;
    transition: width 1s ease;
 }
  
.menu-container {
  padding-top: 50px;
  color: #888;
  font-size: 20px;
  opacity: 0;
}
  
.menu-container li:hover {
  color: #aaa;
}
  
.menu-container-active {
    opacity: 1;
    height: 100%;
    width: 100%;
}
  
.section-transform-active {
  opacity: 1;
    height: 100%;
    width: 50%;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.8); 
}

我的小提琴：https ://jsfiddle.net/sad437xv/38/

在 jsfiddle 中，我无法让它滑入或滑出。它只是弹出/弹出。我似乎无法很好地复制 Divi 构建器结构。我希望菜单文本/按钮也可以与背景叠加一起滑入 - 目前它从宽度：0 到 50% 的方式使菜单项的所有字母随着它们的框宽度扩展而抖动动画，这看起来很奇怪。

任何人都可以帮助显示我在这里出错的地方吗？谢谢

4

1 回答 1

0

您可以使用slideToggle()检查下面的代码片段。

$(function($){
    $('#menu-open').click(function() { 
        $('#slider-background').animate({width:'toggle'}, 250);
    });
    $('#menu-close').click(function() { 
        $('#slider-background').animate({width:'toggle'}, 250);
    });
});
.section-transform { display:none; }
.menu-container { padding-top: 50px; color: #888;font-size: 20px;}
.menu-container li:hover {color: #aaa;}
.menu-container-active {opacity: 1;height: 100%;width: 100%;}
.section-transform-active {opacity: 1;height: 100%;width: 50%;z-index: 99999;background: rgba(0, 0, 0, 0.8);}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menu-open">MENU OPEN</button>
<div id="slider-background" class="section-transform">
  <button id="menu-close" style="float:right">X CLOSE</button>
  <div id="slider-menu" class="menu-container">
    <ul>
      <li>MENU ITEM 1</li>
      <li>MENU ITEM 2</li>
      <li>MENU ITEM 3</li>
      <li>MENU ITEM 4</li> 
    </ul>
  </div>
</div>

于 2021-03-30T17:19:12.383 回答