问按菜单按钮后的JQuery侧栏淤泥
EN

Stack Overflow用户

提问于 2017-07-31 12:48:17

回答 1查看 53关注 0票数 0

我正在尝试使用JQuery中的动画功能，使侧边栏菜单在按下菜单按钮后从左侧(幻灯片)出现。虽然我搜索了堆栈溢出的数据库，但仍然无法使其工作。所以我需要让它从左到右滑动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>

jquery

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-07-31 13:00:27

您正在将工期设置为click事件，而不是动画事件。这段代码将无法运行alert，因为我在第一句中提到了格式化错误。

就这样改变它，

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

结果

希望能帮上忙

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45416395

复制

相似问题

问按菜单按钮后的JQuery侧栏淤泥
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问按菜单按钮后的JQuery侧栏淤泥EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问按菜单按钮后的JQuery侧栏淤泥
EN