Question

我是jQuery的新手，我目前正在尝试以下方法：

我使用animate.css为div设置动画。我现在要做的是定义淡入和淡出之间的时间。例如：

淡入＆gt; 3秒延迟>淡出

我使用此函数动态地将animate.css中的类添加到我的对象（#test）。

$(document).ready(function () {

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

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

});

我试图存档这样的内容：

阶段 1 （＆＃39; #test＆＃39;，＆＃39;反弹在左＆＃39;）;
3秒延迟
阶段 1 （＆＃39; #test＆＃39;，＆＃39;反弹 Out 左＆＃39;）;
1秒延迟
阶段 1 （＆＃39; #test 2 ＆＃39;，＆＃39;反弹在左边＆＃39;） ;
.....

非常感谢任何形式的帮助:)提前致谢！

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).delay(2000).fadeIn(1000).delay(3000).fadeOut(1000).delay(2000);

这对你有用。所有参数指定时间1000 = 1秒

http://jsfiddle.net/k8zq2fo6/

您可以增加链

.form-control {
    display: inline-block;
}

.btn {
    display: inline-block;
}

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>

animate.css动画之间的延迟

4 个答案: