通过信件动画延迟加载

我试图通过两个幻灯片的部分上的信件动画实施。目前我正在使用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 –

通过信件动画延迟加载

回答

相关问题