通過信件動畫延遲加載

我試圖通過兩個幻燈片的部分上的信件動畫實施。目前我正在使用jQuery代碼，但恐怕這遠非理想選擇。
這裏是我的代碼示例：codepen 通過信件動畫延遲加載

$.fn.animation = function() { 
    //get the welcome msg element 
    var $message = $(this); 
    //get a list of letters from the welcome text 
    var $getList = $(this).text().split(""); 
    //clear the welcome text msg 
    $(this).text(""); 
    //loop through the letters in the list array 
    $.each($getList, function(idx, element) { 
    //create a span for the letter and set opacity to 0 
    var newElement = $("<span/>").text(element).css({ 
     opacity: 0 
    }); 
    //append it to the welcome message 
    newElement.appendTo($message); 
    //set the delay on the animation for this element 
    newElement.delay(idx * 90); 
    //animate the opacity back to full 1 
    newElement.animate({ 
     opacity: 1 
    }, 1100); 
    }); 
}; 

$('.introduction').animation(); 
$('.secondary').animation();

第一個問題是，我不能這樣做，所以第一個操作完成後纔會帶班第二句「次要」運行。我試過使用.delay和setTimeout，但這沒有幫助。
另外我不確定如何在第二張幻燈片上加載時啓動動畫。
我知道那裏有插件，但我想用香草JavaScript或jQuery，css3來做。
會很高興任何幫助。
是的，這裏是一個例子，我希望它看起來如何 - http://bootstrapart.net/influence/v1.5.3/
是否有可能，所以每當幻燈片更改時動畫開始？
謝謝。

來源

2016-09-26 Denis

我belieave'promise'將是您正確的答案。檢查此：https://api.jquery.com/promise/ – Andurit

編輯

點擊here看到整個代碼工作。

變化我在CSS製作：我設置HTML文本標籤（<h1>，<h3>和<h4>）的opacity到0，所以他們是隱藏的。然後在animation函數中，它們再次變爲可見。

變化我在腳本製作：的時滯開始第二個文本動畫我用setTimeout()功能：

setTimeout(function(){ 
    $('.secondary').animation(); 
},2000);

爲了檢測傳送帶的滑動事件，根據Bootstrap Documentation您可以使用此方法：

$('.carousel').on('slid.bs.carousel', function() { 
    // here is where you start the animation for the second slide 
})

重新編輯 要TRAC k我們在哪個幻燈片上介紹了一個變量caled：var $wichSlide。這裏是啓動動畫的工作方法時，滑動改變：

$('.carousel').bind('slid.bs.carousel', function (e) { 
    if($whichSlide == 1){ 
     //set $whichSlide position for the next slide event 
     $whichSlide = 2 
     //start to animate the text 
     $('.introduction').animation(); 
     setTimeout(function(){ 
    $('.secondary').animation(); 
},2000); 
     /*set the text on the second slide to be invisible 
     * because we don't want it to appear before animation starts 
     */ 
     $('.slide2').css("opacity",0); 
    }else if($whichSlide == 2){ 
     $whichSlide = 1; 
     $(".carousel").carousel("pause"); 
     $(".slide2").animation(); 
     setTimeout(function(){ 
     $(".carousel").carousel(); 
     },3000); 
     $('.introduction').css("opacity",0); 
     $('.secondary').css("opacity",0); 
    } 
});

See the working code

來源

2016-09-26 12:30:56

非常感謝。這正是我想要的。 – Denis

不客氣！ @Denis –

通過信件動畫延遲加載

回答

相關問題