让两个jQuery动画一个接一个地工作

我正在使用回调函数在slideUp之后执行fadeIn动画。单击向下箭头可以看到动画： https://rimildeyjsr.github.io/St.Anthony-Website/让两个jQuery动画一个接一个地工作

两个动画之间出现白色背景，我怀疑这是由于两个动画之间的延迟。如何修复动画，以便在slideUp结束后立即启动fadeIn，避免白色背景。

的jQuery：

$(".down-arrow").click(function() { 
    $(".school-logo").fadeOut(200); 
    $(".page-load-screen").slideUp(1000,"easeInOutBack",function(){ 
     $(".page-one-pic").fadeIn(500); 
     $(".school-name").delay(500).fadeIn(500); 
     $(".down-arrow-page-one").delay(1500).fadeIn().one(animationEnd, function(){ 
       carousel(); 
      }); 
     }); 
    });

链接到github上库：https://github.com/rimildeyjsr/St.Anthony-Website

来源

2016-11-20 Rimil Dey

更改淡入

$(".page-one-pic").fadeIn(500);

到

$(".page-one-pic").css({opacity: 0.05}).animate({opacity: 1},500);

来源

2016-11-20 17:20:03

不，它不起作用：/ –

确定让一个js小提琴，我们可以在它上面工作。 –

它上面有很多图片和动画，全都依赖于对方。它很难把它放在小提琴 –

虽然你不必任何代码片段或IAM的jsfiddle显示你类似的东西像你想希望它可以帮助你

$(document).ready(function(){ 
 
setInterval('animateImages()', 4000); 
 
}) 
 
function animateImages(){ 
 
    var $active = $('#fade .active'); 
 
    var $next = ($active.next().length > 0) ? $active.next() : $('#fade img:first'); 
 
    $next.css('z-index',2); 
 
    $active.fadeOut(1000,function(){ 
 
\t $active.css('z-index',1).show().removeClass('active'); 
 
    $next.css('z-index',3).addClass('active'); 
 
     }); 
 
    }

#fade{position:relative;} 
 
#fade img{position:absolute;z-index:1} 
 
#fade img.active{z-index:3}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="fade"> 
 
<img class="active" src="https://prod-filesbucket-7hmmorphht20.s3-ap-southeast-2.amazonaws.com/legacyfiles-smooth/sleepy20face.jpg" alt="My image" /> 
 
<img src="http://emojidictionary.emojifoundation.com/img/emoji50.jpg" alt="My image" /> \t 
 
</div>

**注：但要确保有你的图像大小相同，否则淡出一会重叠淡入一个

来源

2016-11-20 17:52:03

让两个jQuery动画一个接一个地工作

回答

相关问题