Question

我想要的是让用户能够点击<div>。单击<div>展开。然后，如果再次单击div，它将缩回到原始宽度。

相反，div会随着第一次点击而扩展。但是，它不会在第二次单击时缩回。我已确认使用console.log()发生了点击事件，但动画不会再次运行。同样，如果我在调用console.log()的动画结束时运行一个函数，那么该函数也会运行，但<div>仍然不会改变大小。我现在尝试了很多不同的方法。

下面是一个这样的尝试。我也尝试过使用removeClass（）。addClass（）并有两个不同的点击事件，但是它们有同样的问题。

$(document).ready(function() {
  var count = 1;
  var modulo = 1;

 $("#animateMe").click(function() {
   modulo = count % 2;
   count += 1;
   $("#animateMe").animate({
     width: (modulo = 0 ? 500 : 250)
   });
 });
});

HTML：

<div id="animateMe"></div>

CSS：

#animateMe  {
  background-color:blue;
  height: 100px;
}

这是一个codepen：https://codepen.io/ethan-vernon/pen/mLqBxR

Answer 1

将条件更改为modulo == 0，与modulo = 0一样，您始终将modulo的值分配给0，结果为false分配宽度每次点击都会显示250的值。

＆＃13;

$(document).ready(function() {
  var count = 1;
  var modulo = 1;
   
  $("#animateMe").click(function() {
    modulo = count % 2;
    count += 1;
    $("#animateMe").animate(
      {
        width: (modulo == 0 ? 500 : 250)
      }
      
    );
  });
  
  
});

＆＃13;

/*
#animateMe {
  background-color: #AAAAAA;
  width: 100px;
  margin: 15px;
  height: 60px;
}
*/

#animateMe  {
  background-color:blue;
  height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="animateMe">
 
</div>

＆＃13;

Answer 2

正如其他用户所指出的那样，您正在尝试进行分配而不是比较：作为一种好的做法，最好使用三重等式（===）并避免使用复杂的语法更好的可读性

if (modulo === 0) {
   width = 500
}
else {
   width = 250
}

您还可以避免检查modulo变量并使用简单的分配，遵循您的逻辑

$("#animateMe").animate({
   width : 500 - (modulo * 250)
});

甚至

$("#animateMe").animate({
   width : [500, 250][modulo]
});

（因为modulo只能是0或1）

我也尝试过使用removeClass（）。addClass（）并且有两个不同的点击事件，但是它们有同样的问题。

单击事件监听器，只需在类上切换就足够了：你只能使用vanillaJS和CSS转换。

<强> CSS

#animateMe  {
  background-color:blue;
  height: 100px;
  width: 500px;
  transition: width 1s 0s;
}

#animateMe.half {
  width: 250px;
}

JS

var el = document.getElementById('animateMe');
el.addEventListener('click', function() {
   this.classList.toggle('half') 
});

Codepen Demo

我无法获得这个更改宽度的jQuery动画，可以运行多次

2 个答案: