如何在文本轮播中添加动画？

Question

我正在制作一个文本轮播，我希望它使用动画来产生一些效果。我知道如何使用动画，但我不知道在这种情况下如何应用动画。如果有人能给我一个如何添加动画效果的例子，我会修改我的代码。谢谢:)

看我的小提琴：https://jsfiddle.net/jyy64c1k/1/

我的 HTML：

<p id="hitTheBlock">
   REVEAL YOURSELF SOMEWHERE
</p>

我的 jQuery

(function(){

      var flipperContent = ['MAKE BIG DECISION','MAKE BIG MISTAKES','MAKE BIG INVENTIONS'];
      var index = 0;


      function flipperSlider(){

        var flipper = $('#hitTheBlock');
        var messageLibrary = flipperContent[index];
        flipper[0].innerHTML = messageLibrary;
        index++;

        if(index >= flipperContent.length){
            index = 0;
        }

       }

       setInterval(flipperSlider,4000);

})();

Answer 1

你可以像下面这样：

DEMO HERE

flipper.slideUp('400',function(){
     flipper[0].innerHTML = messageLibrary;  
}).slideDown('400');