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

Question

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

看我的 fiddle : 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');

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

How to add animation in text carousel?

javascript

jquery

animation

text

carousel