为什么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似乎不等待动画完成？

回答

相关问题