如何淡入淡出更改文本

Question

我正在通过JAvascript更改一些html，我想淡入文本。

这是javascript：

        var int = self.setInterval(function(){
            if(!isPaused){
                changeBG();
            }
        }, 3500);

        function changeBG(){
            //array of backgrounds
            now = (now+1) % array.length ;
            $('.documentary').css('background-image', 'url("' + array[now] + '")');
            document.getElementById('film-detail').innerHTML = array2[now];
            }

这是我的CSS，我认为它会使其淡入：

.documentary-bg div.film-title {
    display: table-cell;
    vertical-align: bottom;
    bottom: 10px;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

和HTML：

<div class='film-title' id="film-detail"></div>

我尝试了多种方法，但不会消失！

Answer 1

我不确定您要淡入什么，但您知道您可以使用：

$(selector).fadeIn(speed,easing,callback)

在您的情况下可能是：

$('.documentary-bg').fadeIn(2000);

Answer 2

为什么不只使用CSS转换？

.text {
  opacity: 1;
  transition: opacity 2s;
}

.text.fadeOut {
  opacity:0;
}

https://jsfiddle.net/tvakyp2c/