jQuery动画在addClass之后不起作用答案

【问题标题】：Jquery animate not working after addClassjQuery动画在addClass之后不起作用
【发布时间】：2013-09-07 19:36:58
【问题描述】：

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

【问题讨论】：

不确定它是否有区别，但有什么特殊原因你有marginTop：“+300”第一个没有px，第二个没有？
由于您要添加课程，因此您必须委托该活动。

标签： jquery slider jquery-animate addclass

【解决方案1】：

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

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

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

【讨论】：

好的，我把第二个函数改成使用.on，第一次就可以了，但是如果你在关闭它后再次点击#form-toggle，它会向下动画并备份。

【解决方案2】：

如何将其简化为：

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

【讨论】：

这个函数有没有办法让当前边距增加或减少300px，而不是设置边距为300/-300？
animateOption.marginTop = -parseInt($('#form-index').css('margin-top')); parseInt 用于以 px 为单位指定边距的情况。