第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

顯示從 x 時(shí)間到 x 時(shí)間的文本（并且它將繼續(xù)用于下一個(gè)文本），如演示

顯示從 x 時(shí)間到 x 時(shí)間的文本（并且它將繼續(xù)用于下一個(gè)文本），如演示

偶然的你 2021-12-02 14:56:38
我試圖像演示文稿一樣顯示文本。我試過這個(gè)代碼setTimeout(fade_out, 2000);function fade_out() {$("#msg").fadeOut().empty();}和<div id="msg"> John (First appear)</div><div id="msg"> Doe (Second appear)</div>但它只是顯示，然后隱藏了這個(gè)詞如何使文本連續(xù)出現(xiàn)和消失（例如在 x 時(shí)間出現(xiàn)并在 y 時(shí)間消失的函數(shù)），因?yàn)槲覍?duì) Javascript 知之甚少。例子：
查看完整描述

3 回答

?
慕無忌1623718

TA貢獻(xiàn)1744條經(jīng)驗(yàn) 獲得超4個(gè)贊

您也可以單獨(dú)使用 CSS 來實(shí)現(xiàn)這種效果。


這是一種完全合法的方法，因?yàn)?CSS 負(fù)責(zé) Web 文檔中的表示層。


工作示例：


body {

  font-family: arial, helvetica, sans-serif;

  color: rgb(255, 255, 255);

  background-color: rgb(0, 0, 0);

}


.slide {

  position: absolute;

  top: 0;

  left: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

  height: 70%;

  font-size: 6vw;

  opacity: 0;

}


.slide-1 {

  animation: showSlide 3s linear 0s;

}


.slide-2 {

  animation: showSlide 3s linear 3s;

}


.slide-3 {

  animation: showSlide 3s linear 6s;

}


.slide-4 {

  animation: showSlide 3s linear 9s;

}


.slide-5 {

  animation: showSlide 3s linear 12s;

}


@keyframes showSlide {


    0% {opacity: 0;}

   20% {opacity: 1;}

   80% {opacity: 1;}

  100% {opacity: 0;}

}

<p class="slide slide-1">Hi!</p>

<p class="slide slide-2">We're setting things up for you</p>

<p class="slide slide-3">Getting there...</p>

<p class="slide slide-4">Just a little bit more...</p>

<p class="slide slide-5">Thanks for your patience.</p>


查看完整回答
反對(duì) 回復(fù) 2021-12-02
?
人到中年有點(diǎn)甜

TA貢獻(xiàn)1895條經(jīng)驗(yàn) 獲得超7個(gè)贊

你可以使用fadeOut()和.fadeIn()。當(dāng)您更改值時(shí)，您可以使用fadeIn()


請(qǐng)檢查下面的代碼片段


function setText() {

  $('#msg span').fadeOut(function() {

    $(this).text(new Date().toLocaleString())

  }).fadeIn();


  setTimeout(function() {

    setText();

  }, 2000);

}


setTimeout(function() {

  setText();

}, 2000);

.msg{display:flex;justify-content:center;align-items:center;width:100%;height:122px}body{background:#000;color:#fff;font-family:sans-serif;margin:0}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="msg" class="msg">

  <span>Date time change start by every 2 second</span>

</div>


查看完整回答
反對(duì) 回復(fù) 2021-12-02
?
肥皂起泡泡

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超6個(gè)贊

這是帶有 setInterval 和 clearInterval 方法的簡(jiǎn)單解決方案，當(dāng)您的“幻燈片放映”結(jié)束時(shí)，它會(huì)停止。


let texts = [

  '<div class="text" id="text_1">Hi!</div>',

  '<div class="text" id="text_2">We`re setting things up for you</div>',

  '<div class="text" id="text_3">Text3</div>'

]


var i = 0;

var timer = setInterval(function(){

  document.getElementsByTagName('container')[0].innerHTML = texts[i];

  ++i;

  if(i == texts.length){

    window.clearInterval(timer);

    document.getElementById("text_"+i).style.cssText = "animation:1s fadeLast ease;opacity:1;"

  }

},1500)

body{

  background: black;

  color:white;

  font-family: sans-serif;

  margin:0

}


*{

  -webkit-box-sizing: border-box;

  box-sizing:border-box

}


container{

  display:flex;

  justify-content:center;

  align-items:center;

  width:100vw;

  height:100vh;

}


.text{

  font-size:2rem;

  opacity:0;

  animation: 1.5s fadeIn ease

}


@keyframes fadeIn{

  0%{opacity:0}

  50%{opacity:1}

  100%{opacity:0}

}


@keyframes fadeLast{

  from{opacity:0}

  to{opacity:1}

}

<container></container>


查看完整回答
反對(duì) 回復(fù) 2021-12-02
  • 3 回答
  • 0 關(guān)注
  • 219 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)