css javascript - innerHTML,具有淡入功能

niwlg2el  于 2022-11-27  发布在  Java
关注(0)|答案(5)|浏览(102)

使用下面的代码行:

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

是否可以添加.fadeIn(“slow”)函数?我希望新文本淡入。

myss37ts

myss37ts1#

用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;
}
4uqofj5v

4uqofj5v2#

最后只是这样做:

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

lfapxunr3#

有点像黑客,但你可以这样做: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);
toiithl6

toiithl64#

在CSS中

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

在JS中

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

qltillow5#

尽量不要担心innerHTML属性的淡入淡出问题,而是将innerHTML Package 在span标记(或者div标记)中,然后简单地淡入淡出该元素。
以下是延迟1,000毫秒的情况:
第一个

相关问题