Jquery切换自定义动画答案

【问题标题】：Jquery toggle on custom animationJquery切换自定义动画
【发布时间】：2012-10-24 23:06:10
【问题描述】：

我有这个动画，我想在点击链接时触发它。当我单独运行动画时，它工作正常。但是使用 jquery toggle()，它不再起作用了。任何人都可以轻松看出原因吗？

没有toggle() 它可以工作（分别运行）：

$('#sign-in-fx').click(function() {
    $('.login_form').animate({ width: '273' }, 'slow', 'easeInOutQuart');
    //$('.login_form').animate({ width: '1' }, 'slow', 'easeInOutQuart');
});

toggle() 没有任何反应：

$('#sign-in-fx').click(function() {
    $('.login_form').toggle(
        function() {
            $(this).animate({ width: '273' }, 'slow', 'easeInOutQuart')
        },
        function() {
            $(this).animate({ width: '1' }, 'slow', 'easeInOutQuart')
        }
    );
});

这类似于jQuery toggle animation

【问题讨论】：

查看api.jquery.com/toggle 看来您使用toggle() 函数不正确。
@Grzegorz 与api.jquery.com/toggle-event相关

标签： jquery jquery-ui animation toggle

【解决方案1】：

现在我认为这是你最初想要做的：

$('#sign-in-fx').toggle(
        function() {
            $('.login_form').animate({ width: '273' }, 'slow', 'easeInOutQuart')
        },
        function() {
            $('.login_form').animate({ width: '1' }, 'slow', 'easeInOutQuart')
        }
);

您在元素上调用 toggle() 以进行动画处理，但必须在将接收 click 事件的元素上调用它。

【讨论】：

我想发布的 sama 答案 :)
其实我的回答是一样的，给出了一些注释并提供了一个工作代码。但可能有点晚了:)
@Nelson 我知道这是一个旧答案，但您使用toggle() 的方式已被弃用。请编辑或删除您的答案，以免引起混淆

【解决方案2】：

toggle()使用了你使用的方式，是deprecated！

使用标志，并直接切换动画宽度，如下所示：

var flag = true;

$('#sign-in-fx').on('click', function() {
    $('.login_form').stop(true, true)
                    .animate({ width: flag?'273':'1' }, 'slow', 'easeInOutQuart');
    flag=!flag;
});

FIDDLE

或者如果你不喜欢全局变量，你可以随时使用 data() ：

$('#sign-in-fx').on('click', function() {
    var flag = $('.login_form').data('flag')!=undefined?$('.login_form').data('flag'):true;
    $('.login_form').stop(true, true)
                    .animate({ width: flag?'273':'1' }, 'slow', 'easeInOutQuart')
                    .data('flag', !flag);
});

FIDDLE

【讨论】：

【解决方案3】：

我认为你也可以这样做：

$('#sign-in-fx').click(function() {
    if (! $('.login_form').is(':animated')) { //if no animation running
       if ($('.login_form').width() > 1) {
          $('.login_form').animate({ width: '1' }, 'slow', 'easeInOutQuart');
       } else {
         $('.login_form').animate({ width: '273' }, 'slow', 'easeInOutQuart');
       }

    }
});

【讨论】：

【解决方案4】：

你确定它是在document.ready 上完成的吗？你的代码看起来不错。

    $(function () {
      $('.login_form').toggle(
          function() {
              $(this).animate({ width: '273' }, 'slow', 'easeInOutQuart')
          },
          function() {
              $(this).animate({ width: '1' }, 'slow', 'easeInOutQuart')
          }
      );
    });

【讨论】：

是的。我真的想不出一个很好的理由为什么它不起作用，除非有一些我太累看的错字..
看看这个答案的编辑 - 它就是这样工作的！ .toogle() 检查单击并执行一个一个添加的函数（处理程序）......它们可能超过 2 个。在您的代码中，您正在单击其他链接。