Question

我正在尝试使用JQuery中的animate函数，在按下菜单按钮后，从左侧（幻灯片）显示侧边栏菜单。虽然我搜索了堆栈溢出的数据库，但仍然无法使其工作。因此，在按下菜单按钮后，我需要让它从左向右滑动，延迟1秒。

<html>
<head>

<meta charset="utf-8">
<title>Sok-app</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div class="background-2" >
<button id="menu_button"> <a href="#menu">
  &#9776; </a> </button>
   <div class="sidebar" style="width:130px display:none">

  <button id="your-best-ap" >Your app</button>
  <button id="team-history-conta" >Team</button>
  <button id="team-history-conta" >History</button>
  <button id="team-history-conta" >Contact</button>
  <button id="suggest-to-a-friend" >Suggest to a friend</button>
</div>
</div>
</div>

<script> 
 $(document).ready(function(){ 
    $("#menu_button").click(function(){
        $(".sidebar").animate({left: '412px'});   //animate margin to create slide from left animation  
    }, 1000);                                     //duration of animation, in milliseconds
 });
</script> 


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Answer 1

您要将持续时间设置为click事件，而不是动画。此代码将无法运行alert，因为我在第一句中提到了格式错误。

像这样改变，

$(document).ready(function(){ 
    $("#menu_button").on("click",function(){
        $(".sidebar").animate({left: '412px', width:'toggle'},1000); 
       // duration after animate properties 
    });                                   
 });

Result

希望有所帮助，

按下菜单按钮后，JQuery侧边栏会变亮

1 个答案: