延遲

Question

我有點新的jQuery和我目前正試圖以下幾點：

我使用animate.css動畫一個div。我現在想要做的是定義淡入和淡出之間的時間。例如：

淡入> 3秒延遲>淡出

我使用此函數來動態地添加從animate.css類我的對象（#TEST）。

$(document).ready(function() { 

    phase1('#test', 'bounceInLeft'); 

    function phase1(element, animation) { 
     element = $(element); 
       element.addClass('animated ' + animation); 
    }; 

}); 

我試圖存檔是這樣的：

1. 階段（ '#TEST'， '反彈在左'）;
2. 3秒延遲
3. 相（ '#TEST'， '反彈缺貨左'）;
4. 1秒延遲
5. 相（ '#TEST '， '反彈在左'）;
6. .....

任何形式的幫助是非常讚賞:)在此先感謝！

Answer 1

是的你setTimeout。將代碼封裝在本節中，並根據需要調整所需的毫秒數。這樣就可以錯開碼定時具有多個值..

這個例子將通過三秒鐘，然後延遲一個在五秒..

setTimeout(function(){ 
     // place your code in here 
    }, 3000); 

    setTimeout(function(){ 
     // place your second bit of code in here 
    }, 5000); 

Answer 2

由於正在使用jQuery，可以使用動畫鏈等這

(function($){ 
    $(".move") 
    .animate({left:"+=200"},3000) 
    .delay() 
    .animate({left:"+=100"},3000); 
})(jQuery); 

See Example

Answer 3

使用jQuery鏈事件

$("#id").fadeIn(1000).delay(3000).fadeOut(1000); 

這應該適合你。所有參數指定時間1000 = 1秒

http://jsfiddle.net/k8zq2fo6/

可以增加鏈

$("#id").fadeIn(1000).delay(3000).fadeOut(1000).delay(2000).fadeIn(1000).delay(3000).fadeOut(1000).delay(2000); 

Answer 4

嘗試利用.queue()

$(function() { 
 
    // load `Animate.css` 
 
    $("style").load("https://raw.githubusercontent.com/" 
 
        + "daneden/animate.css/master/animate.css"); 
 
    // animation settings 
 
    var settings = [{ 
 
    "bounceInLeft": 3000 
 
    }, { 
 
    "bounceOutLeft": 1000 
 
    }, { 
 
    "bounceInLeft": 3000 
 
    }]; 
 
    
 
    $("#test").queue("bounce", $.map(settings, function(val, key) {   
 
    return function(next) { 
 
     var current = Object.keys(val)[0]; 
 
     $(this) 
 
     // reset `className` 
 
     .attr("class", "") 
 
     // add `animated` , `current` `class` 
 
     .addClass("animated " + current); 
 
     // log `.queue("bounce")` iteration 
 
     console.log(this.className, current 
 
        , settings[key][current], $(this).queue("bounce")); 
 
     // "delay": `settings[key][current]` , 
 
     // call `next` function in `.queue("bounce")` 
 
     setTimeout(next, settings[key][current]); 
 
    } 
 
    })) 
 
    .dequeue("bounce") 
 
    // do stuff when `.queue("bounce")` empty 
 
    .promise("bounce") 
 
    .then(function(elem) { 
 
    console.log(elem.queue("bounce"), "complete") 
 
    }) 
 
});

#test { 
 
    position: relative; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="test">abc</div> 
 
<style></style>