jquery - jQuery动画在addClass之后不起作用

Question

我有一张幻灯片，当您单击其底部的 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');
});

Answer 1

您正在向元素动态添加一个类，并且您的脚本在元素上可以使用此类之前附加单击事件处理程序。

尝试使用on方法委派事件。

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

Answer 2

如何将其简化为：

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