Question

我正在尝试使用animation.css库中的slideInleft动画类来更新动画的div内容，并且在2秒后我尝试通过slideLeftout类更新效果。

var i = 0;
setInterval(function showText{
var txt= data; // my data is an array with 5 values
$("#text").empty().append(txt[i].value).addClass('slideInLeft');
},2000);
$("#text").empty().append(txt[i].value).addClass('slideOutLeft');

Answer 1

像这样添加动画：

.addClass('animated slideInLeft')

但我建议你使用这个替代方案（jQuery插件）：https://github.com/craigmdennis/animateCSS/blob/master/README.md

更容易实现和自定义效果

Answer 2

这是怎么回事？

setTimeout(function () {
  $('#text').text('hello').addClass('slideInLeft');

  setTimeout(function () {
      $('#text').text('goodbye').removeClass('slideInLeft').addClass('slideOutRight');
  }, 2000);
  
}, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<div id="text" class="animated"></div>

如何使用jquery更新动画效果？

2 个答案: