#jquery
Вопрос:
как мне сделать так, чтобы каждое изменение текста имело переход «затухание» и «затухание», если я даю интервал в 5 секунд, как я даю затухание и затухание
let timer = 0; do_test(timer); function do_test(timer){ timer ; if (timer gt; 29){ $('body').css('background','blue'); }else if (timer gt; 20){ $('body').css('background','green'); }else if (timer gt; 10){ $('body').css('background','pink'); }else if (timer gt; 3){ $('body').css('background','yellow'); } $('#cnt').text(timer); if (timer lt; 40){ setTimeout(() =gt; {do_test(timer)},500); } else { $('body').html('lt;div id="dun"gt;DONElt;/divgt;'); } } этот html
lt;div id="cnt"gt;lt;/divgt; Ответ №1:
Вы можете использовать fadeIn и fadeOut
let timer = 0; do_test(timer); const body = $("body"); function do_test(timer){ timer ; const elem = $("#cnt"); elem.fadeOut(500, function () { elem.text(timer); if (timer===10) body.css('background','green'); else if (timer===25) body.css('background','yellow'); else if (timer===30) body.css('background','red'); elem.fadeIn(500, function () { if (timer lt; 50) do_test(timer); }); }); } body { transition: background .5s linear; } lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;div id="cnt"gt;lt;/divgt; Ответ №2:
Вы можете использовать setInterval для этого.
const $body = $('body'), cnt = $('#cnt'); let i = 0, do_test = setInterval(function() { i ; if (i gt; 0 amp;amp; i lt; 2) setBg($body, 'blue'); else if (i gt;2 amp;amp; i lt; 4) setBg($body, 'green'); else if (i gt; 4 amp;amp; i lt; 6) setBg($body, 'pink'); else if (i gt; 6 amp;amp; i lt; 8) setBg($body, 'yellow'); if(i == 9){ clearInterval(do_test); setBg($body, 'white'); fadeText('DONE'); }else { fadeText(i); } },1000); function fadeText(text){ cnt.css('opacity', 0); setTimeout(function() { cnt.text(text); cnt.css('opacity', 1); }, 500); } function setBg(sel, col){ sel.css('background',col); } body { transition: background .3s ease; } #cnt { text-align: center; font-size: 30px; line-height: 100px; transition: opacity .5s ease; } lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;div id="cnt"gt;lt;/divgt;