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/

如何淡化更改文本

2 个答案: