Question

我有一个侧面导航菜单（在此页面上：http://layouthuprising.org/about.php），当用户单击屏幕右上方的菜单按钮时，该菜单会滑入视图（当浏览器窗口变窄时，会显示菜单按钮大于900像素）。我想对它进行编码，以便当用户按下“关闭x”按钮时，侧面导航菜单会滑出视图，就像它滑入的方式一样。我尝试使用以下jquery动画：

$（mySidebar）.hide（'slide'，{direction：'left'}，1000）;

然后我尝试了这个由jquery触发的CSS动画：

$（mySidebar）.addClass（“ mySidebar-animate-right”）;

但似乎没有人起作用。有什么可以使该侧导航菜单平滑地滑出吗？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- color change animator -->

<style>

@media (max-width:4000px) and (min-width:980px){
    #mySidebar{display:none !important;}
}

.side_nav_menu_button{
    width: 100%;
    display: block;
    padding: 8px 16px;
    text-align: left;
    border: none;
    white-space: normal;
    float: none;
    text-decoration: none;
    cursor: pointer;
    outline: 0;
    user-select: none;
}

.side_nav_menu_button:hover{
    color: #000!important;
    background-color: #f1f1f1 !important;
}

.side_nav_close_link{
    font-size: 18px; 
    padding: 16px 16px !important; 
}

#mySidebar{
    color: #ffffff! important;
    background-color: #1e324a !important;
    top: 0px;
    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    height: 100%;
    width: 200px;
    position: fixed!important;
    z-index: 1;
    overflow: auto;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;        
}

.mySidebar-animate-left{
    position:relative;
    animation:animateleft 0.4s
}

.mySidebar-animate-right{
    position:relative;
    animation:animateright 0.4s
}

@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}    
@keyframes animateright{from{left:0px;opacity:1} to{left:-300px;opacity:0}}     

</style>


<!-- Sidebar on small screens when clicking the menu icon -->
<nav class="mySidebar-animate-left" style="display:none" id="mySidebar">
  <a href="javascript:void(0)" onclick="closeSideNav()" class="side_nav_close_link side_nav_menu_button">Close ×</a>
  <a onclick="closeSideNav()" class="side_nav_menu_button" href="http://layouthuprising.org/about.php">ABOUT US</a>
  <a onclick="closeSideNav()" class="side_nav_menu_button" href="http://layouthuprising.org/ourwork.php">OUR WORK</a>
  <a onclick="closeSideNav()" class="side_nav_menu_button" href="http://layouthuprising.org/news.php">NEWS</a>
  <a onclick="closeSideNav()" class="side_nav_menu_button" href="http://layouthuprising.org/resources.php">RESOURCES</a>
  <a onclick="closeSideNav()" class="side_nav_menu_button" href="http://layouthuprising.org/stories.php">STORIES</a>
  <a onclick="closeSideNav()" class="side_nav_menu_button" href="http://layouthuprising.org/contribute.php">CONTRIBUTE</a>
</nav>


<script>

// Toggle between showing and hiding the sidebar when clicking the menu icon
var mySidebar = document.getElementById("mySidebar");

function openSideNav() {
  if (mySidebar.style.display === 'block') {
    mySidebar.style.display = 'none';
  } else {
    mySidebar.style.display = 'block';
  }
}

// Close the sidebar with the close button
function closeSideNav() {
    //$(mySidebar).hide();
    //$(mySidebar).removeClass("mySidebar-animate-left");
    //$(mySidebar).addClass("mySidebar-animate-right");
    //$(mySidebar).hide('slide', {direction: 'left'}, 1000);
    //$(mySidebar).toggle('slide',{direction:'left'}, 300);
    mySidebar.style.display = "none";
}


</script>

Answer 1

尝试

.mySidebar-animate-left {
   position: fixed;
   left: 0;}



.mySidebar-animate-right {
    position: fixed;
    left: -300px;}

function openSideNav() {
    $(mySidebar).removeClass("mySidebar-animate-right");
    $(mySidebar).addClass("mySidebar-animate-left");
}

// Close the sidebar with the close button
function closeSideNav() {

    $(mySidebar).removeClass("mySidebar-animate-left");
    $(mySidebar).addClass("mySidebar-animate-right");
}

您可以删除@keyframes部分。在CSS和JS中制作动画的最简单方法是通过JavaScript更改其CSS属性（如left，right，width等），然后向元素添加transition属性。您可以通过删除/添加新类或仅更改特定的CSS属性来实现。

为什么我的侧面导航菜单不会随着这种jquery幻灯片效果而隐藏？

1 个答案: