不允许一个动画开始，直到另一个结束

我基本上试图做的是让我的整个网站的背景变黑，向下滚动到一个特定的点，然后回到正常，它运行FINE但它同时执行所有三种动画，我想知道是否有办法防止这种情况发生？我的jQuery是这样的不允许一个动画开始，直到另一个结束

$('.gotohtml5andcss3').click(function() { 

    $('#bg_black').fadeIn('fast'); 

    $('html, body').animate({ 
     scrollTop: $(".html5andcss3").offset().top 
    }, 1000); 

    $('#bg_black').fadeOut('fast'); 
});

我不是要求代码，只是在正确的方向轻推。在此先感谢！

来源

2013-10-01 Daniel Morgan

使用延迟。 http://stackoverflow.com/questions/19034364/jquery-show-list-of-words-using-fade/19034580#19034580 –

可以使用回调函数一样

$('#bg_black').fadeIn('fast', function(){ 
    $('html, body').animate({ 
     scrollTop: $(".html5andcss3").offset().top 
    }, 1000); 
});

完整代码：

$('.gotohtml5andcss3').click(function() { 
    $('#bg_black').fadeIn('fast', function(){ 
     $('html, body').animate({ 
      scrollTop: $(".html5andcss3").offset().top 
     }, 1000, function(){ 
      $('#bg_black').fadeOut('fast'); 
     }); 
    }); 
});

来源

2013-10-01 21:20:49 Satpal

请注意，'animate'回调会发生**每个**元素被动画，所以例如'$（'html body'）。animate（...）'回调会触发两次。 –

@ T.J.Crowder，点接受，我期待OP处理它 – Satpal

谢谢！和@TJCrowder谢谢关于回调触发信息两次，将它改变为我所需要的 –

你可以连续动画对方的回调函数。事情是这样的：

$('#bg_black').fadeIn('fast', function() { 
    $('html, body').animate({ 
     scrollTop: $(".html5andcss3").offset().top 
    }, 1000, function() { 
     $('#bg_black').fadeOut('fast'); 
    }); 
});

由于每一个异步发生，你想使用它的回调函数的参数来执行的步骤串行序列的下一个步骤。

来源

2013-10-01 21:21:23 David

请注意，'animate'回调会发生**每个**元素都是动画的，所以例如'$（'html body“）。animate（...）'回调会触发两次。 –

@ T.J.Crowder：好点。 OP肯定会想调整以满足他的需求。 – David

不允许一个动画开始，直到另一个结束

回答

相关问题