JQuery.animate(）菜单幻灯片返回

JQuery .animate() Menu Slides Back

本文关键字：幻灯片 返回 菜单 animate JQuery      更新时间：2023-09-26

我有一段代码，当用户点击图片时就会运行。基本上，菜单应该使用.animate（）函数从屏幕外滑入。你应该再次点击相同的按钮，使其返回。然而，当我点击它时，菜单会出现，但会立即滑回。我知道这似乎是一个简单的问题，但我是个新手。有什么帮助吗？

// JavaScript Document
$(document).ready(function(e) {
  var menuopen = false;
  $("#menupic").click(function(e) {
    if (menuopen == false) {
      $(".menu").animate({
        left: "0px"
      }, 200)
      menuopen = true;
    }
  });
  $("#menupic").click(function(e) {
    if (menuopen == true) {
      $(".menu").animate({
        left: "-400px"
      }, 200)
      menuopen = false
    }
  });
});
@charset "utf-8";
/* CSS Document */
.header {
  width: 1280px;
  background-color: #C29832;
  position: fixed;
  left: 0px;
  top: 0px;
  height: 60px;
  z-index: 1000;
}
#logo1 {
  position: fixed;
  left: 70px;
  top: 0px;
}
#menupic {
  cursor: pointer;
  background-image: url('http://placehold.it/180x180/322F37/C29832.png&text=Menu');
  background-size: contain;
  height: 60px;
  width: 60px;
  z-index: 1001;
  position: fixed;
  left: 0px;
  top: 0px;
}
#menupic:hover {
  background-image: url('http://placehold.it/180x180/322F37/C29832.png&text=Menu2');
}
.menu {
  font-family: CordiaUPC;
  height: 800px;
  width: 400px;
  background-color: #000;
  color: #FFF;
  position: fixed;
  top: 60px;
  font-size: 36px;
  opacity: 0.85;
  left: -400px;
}
.menu div p {
  padding: 0px 0px 0px 0px;
  margin: 0px;
  position: relative;
  left: 50px;
}
.menu div {
  position: relative;
  top: 20px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="stylesheet.css" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="animation.js"></script>
    <title></title>
  </head>
  <body>
    <div class="menu">
      <div>
        <p>Home</p>
        <hr />
      </div>
      <div>
        <p>About</p>
        <hr />
      </div>
      <div>
        <p>Posts</p>
        <hr />
      </div>
      <div>
        <p>Other</p>
      </div>
    </div>
    <div class="header">
      <div id="menupic"></div>
      <img src="http://placehold.it/180x180/322F37/C29832.png&text=Logo1" height="60" width="60" id="logo1" />
    </div>
  </body>
</html>

您绑定同一事件两次，因此它被触发两次，并且您的变量menuope在第一次调用中设置为true，然后在第二次调用中验证为true

更改为该代码

$(document).ready(function(e) {
  var menuopen = false;
  $("#menupic").click(function(e) {
    if (menuopen == false) {
      $(".menu").animate({
        left: "0px"
      }, 200)
      menuopen = true;
    }
    else if (menuopen == true) {
      $(".menu").animate({
        left: "-400px"
      }, 200)
      menuopen = false
    }
  });
});

在这种情况下，您不必检查像true/false这样的标志。只需这样使用：

$("#menupic").click(function(e) {
  $(".menu").animate({
    left: $(".menu").css('left') == '-400px' ? "0px" : "-400px"
  }, 200);
});

检查下面的测试用例：

$("#menupic").click(function(e) {
  $(".menu").animate({
    left: $(".menu").css('left') == '-400px' ? "0px" : "-400px"
  }, 200);
});
.menu{position:relative;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='menupic'>menupic</div>
<div class='menu'>menu</div>

想想你在这里做什么：menuitem最初是false。因此执行第一个if语句。在if语句的末尾，menuitem被更改为trueTHEN我们进入第二条if语句（在第二个click处理程序中），在这里检查menuitem是否为true。但事实确实如此——我们只是设定了它！因此if语句也会运行——菜单滑入，然后再次滑出。

相反，您希望使用else只运行其中一个。（我还删除了== true和== false，因为它们完全没有必要-谷歌可以更好地理解boolean和if）：

$("#menupic").click(function(e) {
    if (menuopen) {
        // close the menu
        $(".menu").animate({
          left: "-400px"
        }, 200)
        menuopen = false;
    } else {
        // open the menu
        $(".menu").animate({
            left: "0px"
        }, 200)
        menuopen = true
    }
});

您是否尝试过在同一个函数中执行所有操作？

$("#menupic").click(function(e) {
    if(menuopen==false){
        $(".menu").animate({left:"0px"},200)
    menuopen=true;        
    }else{
        $(".menu").animate({left:"-400px"},200)
    menuopen=false;
    }
});
相关文章：