Question

使用以下代码行：

document.getElementById("myDiv").innerHTML=txt;

是否可以添加.fadeIn（“慢”）功能？我希望新文本能够淡出。

Answer 1

用js + CSS做。随着CSS过渡，它将淡入。

您需要将font-color设置为background-color。首先改变内容，然后将颜色更改为普通字体颜色。

你的js：

document.getElementById("myDiv").innerHTML=txt;
document.getElementById("myDiv").style.color = "#333333";

你的CSS：

#myDiv {
    color: #ffffff;
    transition: color 2s ease 0s;
}

Answer 2

结束这样做：

$("div.col-lg-6").replaceWith(function() {
return $(txt).hide().fadeIn(1000);});

Answer 3

有点像黑客，但你可以这样做：http://codepen.io/zvona/pen/LVxxjM

我们为此目的使用CSS转换。

<button class='add'>Add text</button>
<button class='clear'>Clear text</button>
<div id="myDiv"></div>

和

#myDiv {
  opacity: 0;
  transition: opacity 1000ms;
}

#myDiv.show {
  opacity: 1;
}

和

var myDiv = document.querySelector("#myDiv");

document.querySelector(".add").addEventListener('click', function() {
  myDiv.textContent = "Fade magic";
  myDiv.classList.add('show');
}, false);

document.querySelector(".clear").addEventListener('click', function() {
  myDiv.classList.remove('show');
}, false);

Answer 4

在 CSS 中

#mydiv {
opacity: 0;
transition: opacity 2s;
}

在JS中

document.getElementById("myDiv").style.opacity= "1";

javascript - 带淡入的innerHTML

4 个答案: