Question

我遇到了一个问题，我无法在使用JQuery的.animate进行div左右时看到。我是这个网站开发的新手，所以我向你寻求帮助。

这是文件：

＆＃13;

$(document).ready(function() {
  $('#nav-button').click(function() {
    $(this).data('clicked', true);
  });
  if ($('#nav-button').data('clicked')) {
    $('#nav-menu').animate({
      left: '200'
    }, 500);
  } else {
    $('#nav-menu').animate({
      left: '0'
    }, 500);
  }
});

＆＃13;

html {
  position: relative;
  height: 100%;
  background-color: #6E6E6E;
}
#container {} .nav-button {
  position: absolute;
  margin-top: -2px;
  margin-left: 7px;
  width: 32px;
  height: auto;
  z-index: 1;
}
.nav-menu {
  background-color: #424242;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 200px;
  height: 100%;
}
.logo {
  position: relative;
  top: 250px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 225px;
}
.logo h3,
h1 {
  text-align: center;
  font-family: Sansita One;
  color: #222;
  text-shadow: 0px 2px 3px #555;
}
.logo h1 {
  margin-bottom: 3px;
}
.logo h3 {
  margin-top: 2px;
}
.hover-rotate:hover {
  -ms-transform: rotate(-170deg);
  -webkit-transform: rotate(-170deg);
  -moz-transform: rotate(-170deg);
  -o-transform: rotate(-170deg);
  transform: rotate(-170deg);
}

＆＃13;

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Sansita+One" />
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="script.js" type="text/javascript"></script>
<title>Manuel Pepe - Test</title>
</head>

<body>
  <div id="nav-bar" class="nav-bar">
    <div id="container">
      <img id="nav-button" class="nav-button" src="imgs/menu.png" />
      <div id="nav-menu" class="nav-menu">
      </div>
    </div>
  </div>
  <div class="front-page">
    <div class="logo">
      <h1>Manuel Pepe</h1>
      <h3>Test</h3>
    </div>
  </div>

＆＃13;

Answer 1

请改为尝试：

$(document).ready(function(){
    var $navButton = $('#nav-button'),
        $navMenu = $('#nav-menu'),
        transitioning = false;

    $navButton.click(function(){
        var $this = $(this);
        $this.data('clicked', !$this.data('clicked'));

        if(!transitioning) {
           transitioning = true;
           if($navButton.data('clicked')) {
             $navMenu.animate({left: '200'}, 500, function(){
                 transitioning = false;
             });
           } else {
             $navMenu.animate({left: '0'}, 500, function(){
                 transitioning = false;
             });
           }
        }
    });
});

如果要在单击时进行响应，则动画逻辑需要位于click事件处理程序内部。另外，您正在设置“点击”＆＃39; data属性每次都为true，所以它不会改变。这可以作为切换：

$(this).data('clicked', !$(this).data('clicked'));

用按钮来回移动div

1 个答案: