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 に答える