Question

我有这个动画，我想在点击链接时触发。当我单独运行动画时，它工作正常。但是使用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

Answer 1

现在我认为这是你原本想做的事情：

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

您在要激活的元素上调用toggle()，但必须在将接收click事件的元素上调用它。

Answer 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

Answer 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');
       }

    }
});

Answer 4

您确定已在document.ready完成了吗？你的代码似乎很好。

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

Jquery切换自定义动画

4 个答案: