Question

我正在使用回调函数在slideUp之后执行fadeIn动画。单击向下箭头可以在此处看到动画： https://rimildeyjsr.github.io/St.Anthony-Website/

两个动画之间出现白色背景，我怀疑这是因为两个动画之间的延迟。如何修复动画，以便一旦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

Answer 1

更改你的淡入淡出

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

到

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

Answer 2

虽然你没有任何代码片段或jsfiddle iam向你展示类似的东西，你希望它能帮助你

$(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(){
	  $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" />	
</div>

**注意：但请确保您的图像尺寸相同，否则淡出一个将与淡化图像重叠

制作两个jquery动画一个接一个地工作

2 个答案: