-1

この問題は、blink 関数を変更してすべてのオブジェクトへの順序付けを含めることで解決されました。

興味がある場合は、最新の jsfiddle をご覧ください。 http://jsfiddle.net/6UjF3/4/

ユーザーの選択に基づいて異なるセクションを表示するページを作成しようとしています。1 つのボタンをクリックすると、2 つのオブジェクトがアニメーションの順序で表示され、1 つのオブジェクトが次々と表示されます。この効果は、対応するボタンをクリックするたびに繰り返す必要があります。ここでの問題は、ユーザーが 2 つのボタンを切り替えるときに、点滅アニメーションが常にオブジェクトの正しい順序を示すとは限らないことです。

ここに私が使用した機能があります：

    $(document).ready(function()
    {   

          function blinkObject () {
              $('.blink').fadeTo(0,0);//hide at first
              $('.blink').each(function(i) {//for each blink
                 $(this).delay(i*1500).animate({opacity: '1'}, 1000);
                  });

      }

          $("#b1").click(function(){
             $('.blink').stop(true,true);
                 $(".page1").css({"display": "block"}); 
                 $(".page2").css({"display": "none"}); //
                 blinkObject ();

          });

          $("#b2").click(function(){
            $('.blink').stop(true,true);
                $(".page1").css({"display": "none"}); 
                $(".page2").css({"display": "block"}); //
                blinkObject ();
          });

     });

これがjsfiddleです：http://jsfiddle.net/6UjF3/3/

ps：答えの1つでjsfiddleを更新しましたが、数回切り替えた後に順序が正しくないことを除いて、かなりうまく機能しています。

4

3 に答える 3

2

これは簡単かもしれません

jQuery

function blinkObject(p) {
    $('.page').eq(p).show().children('.blink').stop(false,true).each(function(i) {//for each blink
        $(this).stop(true,false).fadeTo(0,0).delay(i*1000).animate({opacity: '1'}, 1000);//fadein
    }).end().siblings('.page').hide();//hide siblings
}

$('.page').first().siblings('.page').hide();//hide all but first

$(".but").each(function(i){
    $(this).on('click', function() {
        blinkObject(i);//run blink
    });
});

pageページに のクラスとbutボタンにのクラスを追加しました。

フィドルを作った：http://jsfiddle.net/filever10/rruM9/

于 2013-11-09T00:09:31.600 に答える
0

page1から非表示のクラスを削除するのを忘れていましたが、これは機能します。

$("#b1").click(function(){
             $(".page1").removeClass("invisible");
             $(".page1").addClass("visible"); //
             $(".page2").removeClass("visible"); //
                 blinkObject ();

          });
于 2013-11-08T20:02:30.880 に答える