自定义动画上的Jquery切换

我有这个动画，我想触发点击链接。当我单独运行动画时，效果很好。但是使用jquery切换，它不再工作了。谁都能明白为什么

如果不切换，它将分别运行：

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

使用“切换”时，不会发生任何情况：

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

---

这类似于

我想你也可以这样做：

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

    }
});

---

我想你也可以这样做：

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

    }
});

切换使用的方式，您正在使用它，是

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

var flag = true;

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

或者，如果您不喜欢globals，您可以始终使用数据：

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

切换使用的方式，您正在使用它，是

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

var flag = true;

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

或者，如果您不喜欢globals，您可以始终使用数据：

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

---

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

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

---

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

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

---

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

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

---

您正在对要设置动画的元素调用toggle，但必须对将接收单击事件的元素调用toggle

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

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

---

您正在对要设置动画的元素调用toggle，但必须对将接收单击事件的元素调用toggle

See看起来您不正确地使用了切换功能。@Grzegorz它与See相关。See看起来您不正确地使用了切换功能。@Grzegorz它与它相关。我真的想不出一个好的理由为什么它不起作用，除非有一些打字错误我太累了以至于看不见。看这个答案的编辑-它是这样工作的。toogle检查单击并执行逐个添加的函数Shandler。。。它们可能不止2个。在您的代码中，您正在单击其他链接。它是。我真的想不出一个好的理由为什么它不起作用，除非有一些打字错误我太累了以至于看不见。看这个答案的编辑-它是这样工作的。toogle检查单击并执行逐个添加的函数Shandler。。。它们可能不止2个。在您的代码中，您正在单击其他链接。我想发布的sama答案：实际上，我的答案是相同的，给出了一些注释并提供了一个工作代码。但可能有点晚了：@Nelson我知道这是一个古老的答案，但您使用toggle的方式不受欢迎。请编辑或删除您的答案，以免混淆人们我想发布的sama答案：实际上我的答案是相同的，给出了一些注释并提供了一个工作代码。但可能有点晚了：@Nelson我知道这是一个古老的答案，但您使用toggle的方式不受欢迎。请编辑或删除您的答案，以免混淆他人