Jquery动画在addClass之后不工作

我有一张幻灯片，当你点击它底部的一个div时，我想向下移动，如果你再次点击它，我想后退。我正在使用这个jquery，但是第二个函数没有做任何事情

$('#form-toggle').click(function(){
  $('#form-index').animate({
    marginTop:"+300",
  });
  $('#form-toggle').addClass("close-form");
});
$('.close-form').click(function() {
  $('#form-index').animate({
    marginTop:"-300px",
  });
  $('#form-toggle').removeClass('close-form');
});

---

您正在动态地向元素添加一个类，并且您的脚本在该类在元素上可用之前附加click事件处理程序

尝试使用on方法委派事件

$('.parent-class').on('click', '.close-form', function () {
    ....
});

---

将其简化为：

var animateOption = {marginTop : -300};
$('#form-toggle').click(function(){
    animateOption.marginTop = -animateOption.marginTop;
  $('#form-index').animate(animateOption);
});

---

不确定这是否会产生影响，但是否有一个特殊的原因让您使用marginTop:“+300”在第一个上没有px，而在第二个上没有px？因为您要添加类，所以您必须委派事件。好的，我将第二个函数改为使用。打开，它第一次工作，但如果您在关闭它后再次单击“表单切换”，则，它可以向下和向上设置动画。该函数是否可以从当前边距中添加或减去300px，而不是将边距设置为300/-300？

animateOption.marginTop=-parseInt（$（“#表单索引”）.css（'margin-top'）
parseInt
用于在px中指定边距的情况。