2

私がやろうとしていることは：

  1. プログレスバーでフェードインします。
  2. フェードが終了したら、プログレスバーを100％にアニメートします。
  3. プログレスバーが100％になったら、プログレスバーをフェードアウトします。
  4. フェードアウトが完了したら、プログレスバーをリセットします。

私はこのコードが解決策を提供すると思いました：

    $('#savebar').fadeIn('fast', function () {
        $('#savebar .bar').animate({width: '100%'}, "slow", function () {
            $('#savebar').fadeOut('fast', function () { 
                $('#savebar .bar').css({'width':'0%'});
            });
        });
    });

問題は、animatecomplete関数が早期に実行されることのようです。これは、ブラウザがプログレスバーを十分に速くレンダリングしないためですか、それともここで何かが足りないためですか？

これが問題を説明しているjsfiddleです：http：//jsfiddle.net/dub6P/

4

3 に答える 3

5

フェードアウトが早すぎるようです。フェードアウトの前に遅延を追加してみてください。アニメーションはそのようにかなりよく見えますIMO：http: //jsfiddle.net/dub6P/7/

$('#btn').click(function () {
    $('#savebar').fadeIn('fast', function () {
    $('#savebar .bar').animate({width: '100%'}, "slow", function () {
             $('#savebar').delay(1000).fadeOut('fast', function () { 
                 $('#savebar .bar').css({'width':'0%'});
             });
         });
     });    
 });

</ p>

于 2012-12-19T11:33:54.230 に答える
3

フェードアウト機能を遅くすると、正常に動作しているようです。

$('#btn').click(function () {
    $('#savebar').fadeIn('fast', function () {
        $('#savebar .bar').animate({width: '100%'}, "slow", function () {
            $('#savebar').fadeOut(1500, function () {
                $('#savebar .bar').css({'width':'0%'});
            });
        });
    });    
});

例： http： //jsfiddle.net/dub6P/5/

于 2012-12-19T11:30:50.227 に答える
0

アニメーションを速くし、フェードアウトを遅くすることで解決できると思います。

$('#btn').click(function () {
  $('#savebar').fadeIn('fast', function () {
     $('#savebar .bar').animate({width: '100%'}, 500, function () {// 500 ms used
         $('#savebar').fadeOut(1500, function () {                // 1500 ms used
             $('#savebar .bar').css({'width':'0%'});
         });
     });
  });    
});

フィドル： http： //jsfiddle.net/dub6P/10/

于 2012-12-19T11:54:42.880 に答える