Question

我使用简单的JavaScript关闭并打开菜单，但我想知道如何在打开菜单时插入延迟。

HTML

 <a href="#1" onclick="return show();">open Menu</a>
 <a href="#1" onclick="return hide();">Hide Menu</a>

   <div id="container">
     <div id="side-menu" style="display:none">Left menu</div>
     <div id="body">body</div>
   </div>

CSS

 #container{ position: absolute;display: table}
 #side-menu, #body {display:table-cell;}
 #body {width: 80%;}
 #side-menu {width: 260px;}

JavaScript：

 <script> 
    function show() { 
     if(document.getElementById('side-menu').style.display=='none') { 
        document.getElementById('side-menu').style.display='block';            

     } 
      return false;
     } 
      function hide() { 
        if(document.getElementById('side-menu').style.display=='block') { 
        document.getElementById('side-menu').style.display='none'; 
     } 
        return false;
     }   
</script>

单击打开菜单时，它会打开侧栏菜单并将正文推向右侧。我的问题是如何使身体向右推迟，或说过渡可能大约是.8s。

JavaScript能否解决这个问题？

Answer 1

使用jquery

$("#side-menu").hide(800)

您还可以添加不同类型的animations

更新了您的javascript代码：

function showHide() { 
  if($("#side-menu").is(":visible") { 
      $("#side-menu").hide(800);         
  } else {
      $("#side-menu").show(800);
  }
}

Answer 2

我更喜欢完全的CSS解决方案：

#side-menu {
    left: -260px;
    width: 260px;
    position: absolute;
    transition-property: left;
    transition-delay: 0.5s;
    transition-duration: 0.8s;
}
#side-menu.open {
    left: 0;
}

（请注意，我在这里很懒，并且绝对定位元素，这会将它滑出身体。这是因为使用{{1}来演示过渡是最简单的您可以使用left代替定位元素。）

Answer 3

这是没有jQuery而且没有滑动：
你的按钮：

 <a href="#1" onclick="show();">open Menu</a>
 <a href="#1" onclick="hide();">Hide Menu</a>

你的惯例：

function show() {
  setTimeout( function() {document.getElementById('side-menu').style.display='block'; }, 800);            
} 
function hide() { 
  setTimeout( function() {document.getElementById('side-menu').style.display='none'; }, 800);
}

如何插入转换延迟

3 个答案: