讓兩個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動畫一個接一個地工作

回答

相關問題