1

1 つの div をアニメーション化し、クリックすると別の div をフェードする関数を作成しました。もう一度クリックすると、アニメーションが逆に実行されます。関数は機能しますが、アニメーション部分はアニメーションなしで指定されたポイントにジャンプし、逆に実行された場合にのみジャンプします。

左マージンはフェードの前に設定されているため、フェードの完了後に設定ポイントにジャンプすると思いますが、これを修正する方法がわかりません。

私の質問

ボタンのクリックで 2 つの異なるターゲットを指定してフェードを実行し、続いてアニメーションを実行する方法。次に、トグルをクリックして逆に実行します。jquery1.9

var toggle = false;
$('#btn1, #btn2').click(function(){
    $('#CtrCol').animate({marginLeft: toggle ? 251 : 0},{complete: function(){
        $('#LftCol').fadeToggle();
    }}); 
    toggle = ! toggle;
});

私の解決策

var flag = 0;
$('#btn1, #btn2').click(function() {
    if (flag == 0) {
        $('#LftCol').fadeOut({complete: function(){
            $('#CtrCol').animate({marginLeft: 0});
        }});
        flag = 1
    }
    else if (flag == 1) {
        $('#CtrCol').animate({marginLeft: 251},{complete: function(){
            $('#LftCol').fadeIn();
        }});
        flag = 0
    }
});
4

1 に答える 1

1

アニメーションを実行する方向を知るフラグを設定し、.click 関数で確認することができます。

if (flag == "right") // run right anim
  flag = "left"
else // run left anim
  flag = "right"

編集：コールバックを保持

于 2013-03-17T14:05:36.497 に答える