jquery - 如何使用 jQuery 还原动画？

Question

我想知道如何使用 jQuery 恢复这个动画，看看这个页面：

http://bksn.mx/TAC/

正确的方法是当你点击“Equipo”时，它会显示流畅的动画，然后再次点击它，它可以很好地恢复动画。

错误的方法是当你点击“Arquitectura”时，它会开始流畅的动画，然后再次点击它......它看起来像搞砸了并且不会恢复动画......

我尝试制作.toggle();方法但它没有工作3次，我不知道为什么......

有一个Arquitectura的脚本：

$('h2#arq').click(function() {
  $('section#pryctA4, section#ext').animate({
    opacity: 'toggle',
    height: 'toggle',
    margin: 20
    }, {
    duration: 750,
    specialEasing: {
      width: 'linear',
      height: 'easeInOutQuad'},
    }
  );
});

如果您愿意，可以使用另一个“Equipo”脚本：

$('h2#equipo').click(function() {
  $('section#team').animate({
    opacity: 'toggle',
    height: 'toggle'
    }, {
    duration: 750,
    specialEasing: {
      width: 'linear',
      height: 'easeInOutQuad'},
    }
  );
});

提前致谢！

Answer 1

您的margin属性没有切换（两次都在动画中，产生生涩的效果）：

$('h2#arq').click(function() {
  $('section#pryctA4, section#ext').animate({
    opacity: 'toggle',
    height: 'toggle',
    margin: 20},
{
    duration: 750,
    specialEasing: {
      width: 'linear',
      height: 'easeInOutQuad'},
    }
  );
});

修复它的肮脏方法是包含一个 inline if：

$('h2#arq').click(function() {
  $('section#pryctA4, section#ext').animate({
    opacity: 'toggle',
    height: 'toggle',
    margin: ($(this).css('margin') == 20) : 0 ? 20},
{
    duration: 750,
    specialEasing: {
      width: 'linear',
      height: 'easeInOutQuad'},
    }
  );
});

不确定是否存在另一个更优雅的解决方案。