1

リンクをクリックした後、ボックスがシーンの左側に移動し、次に別のボックスが右側から移動する、githubのプロジェクトビューアに似たものを作成しようとしています。

私がこれを試みた方法は、アニメーション化されたdivを1つだけにすることです。リンクをクリックすると、divが画面の左側に移動します。次に、最初のanimate（）のコールバックで、.cssを呼び出してページの右側に移動し（アニメーション化せずに、そこにジャンプするだけです）、もう一度アニメーション化して、右側からビューに戻します。

これがJSです

$('.mLink').on('click', function(e) {
    var 
            marginR = $('#mover').css('margin-right'),
            marginL = $('#mover').css('margin-left');

    $('#mover').animate({
            'margin-left': '-1500px',
            'margin-right': '1500px'
    }, 500, 'ease-out', function() {

            $('#mover').css({
                    'margin-left': '1500px',
                    'margin-right': '-1500px'
            });

            $('#mover').animate({
                    'margin-left': marginL,
                    'margin-right': marginR
            }, 500, 'ease-in');
    });
});

つまり、画面の左側でアニメーション化されてから右側に正しくジャンプしますが、実際にはアニメーションを実行せずに適切な場所に表示されます。animate（）がアニメーションを表示せずに実行していることを意味するため、なぜこれが発生しているのか興味がありますか？

編集：明確にするために

4

1 に答える 1

3

私はすべての依存関係を見ることができず、したがって同じもののフィドルを作成することができないので、このようなものを試してください、

 $('.mLink').on('click', function(e) {
    var 
            marginR = $('#mover').css('margin-right'),
            marginL = $('#mover').css('margin-left');

    $('#mover').animate({
            'margin-left': '-1500px',
            'margin-right': '1500px'
    }, 500, 'ease-out', function() {

           $('#mover').animate({
               'margin-left': ' 1500px',
               'margin-right': '-1500px'
           }, 500, 'ease-in', function() {

                  $('#mover').animate({
                          'margin-left': marginL,
                          'margin-right': marginR
                  }, 500, 'ease-in', function(){return false;});
           });
    });
});

2つの効果が必要な場合は、2つの機能を使用できるため、これでうまくいくことを願っています。:)以上、またはすべてを1つの関数にまとめる場合。

于 2013-03-18T08:22:21.290 に答える