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

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');