0

まず最初に-それ自体ではありませんtoggle()。

このコードはスライダーのように機能するはずです。1 Divが表示されているので、ボタンをクリックすると、次のdivが表示され、別のボタンをクリックすると、最初のdivが表示されます。

これは今のところ機能しますが、逆方向には機能しません。したがって、ボタンは2番目のDivを表示するように機能しますが、作成した「less」ボタンを押すと、2番目のDivが消え、1番目のDivは非表示のままになります。

コードは次のとおりです。

$('.more').click(function() {
    $('.c1')
        .animate({ left: "-828px" }, 600, 'easeInOutQuint')
        .delay(300, function() {
            $('.c2').animate({ left: "0px" }, 600, 'easeInOutQuint'); 
        }
    );
});

$('.less').click(function() {
    $('.c2')
        .animate({ left: "828px" }, 600, 'easeInOutQuint')
        .delay(300, function(){
            $('.c1').animate({ left: "0px" }, 600, 'easeInOutQuint'); 
        }
    );
});

私は何が欠けていますか？そして、基本的に同じコードを2回繰り返さないようにするには、どうすればよいでしょうか。

4

3 に答える 3

2

遅延の代わりにコールバック関数を試しましたか？

$('.more').click(function(){
    $('.c1').animate({ left:"-828px"}, 600, 'easeInOutQuint',function(){
       $('.c2').animate({left:"0px"}, 600, 'easeInOutQuint'); 
    });
});
$('.less').click(function(){
    $('.c2').animate({ left:"828px"}, 600, 'easeInOutQuint',function(){
       $('.c1').animate({left:"0px"}, 600, 'easeInOutQuint'); 
    });
});
于 2012-11-23T15:16:22.357 に答える
1

あなたはについて間違った概念を持っています.delay。

jqueryのドキュメント：

説明：キュー内の後続のアイテムの実行を遅らせるようにタイマーを設定します。

そして、そのパラメータは次のとおりduration [, queueName]です。

また、SOの答えから：

delay（）関数は、要素でキューに入れられたアクションにのみ適用されます

したがって、@ nicolastが言ったように、コールバックを使用するのが最善の選択だと思います。ここで動作しています。そして最終的なコードは次のとおりです。

$('.more').click(function() {
    $('.c1')
        .animate({ left: "-400px" }, 600, function() {
            $('.c2').animate({ left: "0px" }, 600);
        }
    );
});

$('.less').click(function() {
    $('.c2')
        .animate({ left: "400px" }, 600, function(){
            $('.c1').animate({ left: "0px" }, 600);
        }
    );
});
于 2012-11-27T11:52:45.240 に答える
0

この作品を再現します。さらに押すと：c1は-100pxになり、その後c2は0pxになりますより少なく押すと：c2は100pxになり、その後c1は0pxになります

$('.more').click(function() {
    $('.c1')
    .stop()
    .animate({ left: "-100px" }, 600, 'linear')
    .delay(300, function() {
        $('.c2').stop().animate({ left: "0px" }, 600, 'linear'); 
    });
});

$('.less').click(function() {
    $('.c2')
    .stop()
    .animate({ left: "100px" }, 600, 'linear')
    .delay(300, function(){
        $('.c1').stop().animate({ left: "0px" }, 600, 'linear'); 
    });
});
于 2012-11-23T15:33:33.103 に答える