如何使用 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 属性没有切换（在动画中 in 两次，都会产生不稳定的效果）：

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

修复它的肮脏方法是包含一个内联 if< /code>：

$('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'},
    }
  );
});

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