2

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

4

4 回答 4

3

现在我认为这是您最初想做的事情：

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

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

于 2012-10-24T23:22:37.903 回答
1

toggle()以您使用它的方式使用，已弃用！

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

var flag = true;

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

小提琴

或者，如果您不喜欢全局变量，您可以随时使用 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);
});​

小提琴

于 2012-10-24T23:13:33.270 回答
0

我认为您还可以执行以下操作：

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

    }
});
于 2012-10-24T23:13:17.997 回答
0

你确定它已经完成了document.ready吗？你的代码看起来不错。

    $(function () {
      $('.login_form').toggle(
          function() {
              $(this).animate({ width: '273' }, 'slow', 'easeInOutQuart')
          },
          function() {
              $(this).animate({ width: '1' }, 'slow', 'easeInOutQuart')
          }
      );
    });
于 2012-10-24T23:16:10.867 回答