爲什麼jQuery似乎不等待動畫完成？

淡入進度條。
淡入淡出完成後，將進度條的動畫設置爲100％。
當進度條爲100％時，淡出預處理欄。
當淡出完成時，重置進度條。

我想這個代碼將提供解決方案：

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

的問題似乎是，在生命的完整功能的早期執行到。這是因爲瀏覽器沒有足夠快地渲染進度條，或者我在這裏丟失了什麼？

這裏是一個的說明問題的jsfiddle：http://jsfiddle.net/dub6P/

來源

2012-12-19 picknick

好像淡出太快發生。嘗試在fadeOut之前添加延遲。動畫看起來不錯呀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%'}); 
      }); 
     }); 
    });  
});

來源

2012-12-19 11:33:54 tom

我同意這可以正常工作，但不是當動畫完成時執行完整功能的想法嗎？這是因爲動畫不會等待瀏覽器呈現每一步？ – picknick

評論是正確的錢。儘管在這種情況下，這個答案「運作得很好」，但它並沒有解決核心問題，即「完成」回調不等待動畫完成。 – nathanchere

放慢淡出功能，它似乎很好地工作。

$('#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-19 11:30:50

你有一個關於我對湯米回答的評論的解釋？ – picknick

我覺得製作動畫更快，淡出越慢解決：

$('#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-19 11:54:42 Jai

爲什麼jQuery似乎不等待動畫完成？

回答

相關問題