У меня есть прикольная карусель текста с перекрестным затуханием jQuery из заимствованного кода (от здесь / здесь ), и я предоставляю форматированный текст с помощью включенного html, динамически генерируемого внешним php,Это именно тот эффект, который мне нужен.
Дело в том, что он работает нормально ... но только , если я использую тонну <FONT COLOR> тегов для получения желаемого форматирования (несколько цветов на слово ).Я неоднократно читал, что крайне важно, чтобы я не использовал <FONT>, поскольку он устарел и поэтому заставит детей плакать или что-то в этом роде.
Работа MCVE:
$("#caption").css("width", $("#caption > span:first-child").width());
$("#caption").css("height", $("#caption > span:first-child").height());
var captionIdx = 0;
var captionItemCount = $("#caption > span").length;
setInterval(function() {
$("#caption span:eq(" + captionIdx + ")").fadeOut("slow");
captionIdx = (captionIdx + 1) % captionItemCount;
var $next = $("#caption span:eq(" + captionIdx + ")");
$("#caption").css("width", $next.width());
$("#caption").css("height", $next.height());
$next.fadeIn("slow");
}, 2000);
#container {
text-align: center;
display: block;
}
#caption {
padding: 0px;
display: inline-block;
position: relative;
vertical-align: bottom;
-webkit-transition: width 0.25s linear;
-moz-transition: width 0.25s linear;
-ms-transition: width 0.25s linear;
-o-transition: width 0.25s linear;
transition: width 0.25s linear;
}
#caption>span {
display: none;
position: absolute;
top: 0px;
left: 0px;
}
#caption>span:first-child {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="container">
This task is
<span id="caption">
<span><a href="http://lnk1.co"><font color=red>Confu</font><font color=green>sing</font></a></span>
<span><a href="http://lnk2.co"><font color=green>Frust</font><font color=blue>rating</font></a></span>
<span><a href="http://lnk3.co"><font color=blue>Tire</font><font color=red>some</font></a></span>
</span>
</div>
</body>
... поэтому я пытаюсь вместо этого использовать CSS, , но это "ломает" карусель ,предположительно, поскольку мне нужны дополнительные <SPAN> s для применения форматирования, в то время как jQuery использует <SPAN> в качестве разделителя при повороте фразы.
Broken MCVE:
Примечание единственная разница - 3 строки <style> и 3 строки в <span id="caption">.
$("#caption").css("width", $("#caption > span:first-child").width());
$("#caption").css("height", $("#caption > span:first-child").height());
var captionIdx = 0;
var captionItemCount = $("#caption > span").length;
setInterval(function() {
$("#caption span:eq(" + captionIdx + ")").fadeOut("slow");
captionIdx = (captionIdx + 1) % captionItemCount;
var $next = $("#caption span:eq(" + captionIdx + ")");
$("#caption").css("width", $next.width());
$("#caption").css("height", $next.height());
$next.fadeIn("slow");
}, 2000);
.w1 { color: #FF0000; }
.w2 { color: #00FF00; }
.w3 { color: #0000FF; }
#container {
text-align: center;
display: block;
}
#caption {
padding: 0px;
display: inline-block;
position: relative;
vertical-align: bottom;
-webkit-transition: width 0.25s linear;
-moz-transition: width 0.25s linear;
-ms-transition: width 0.25s linear;
-o-transition: width 0.25s linear;
transition: width 0.25s linear;
}
#caption>span {
display: none;
position: absolute;
top: 0px;
left: 0px;
}
#caption>span:first-child {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="container">
This task is
<span id="caption">
<span><a href="http://lnk1.co"><span class="w1">Very</span><span class="w2">Frustrating</span></a></span>
<span><a href="http://lnk2.co"><span class="w2">Just</span><span class="w3">Alright</span></a></span>
<span><a href="http://lnk3.co"><span class="w3">Totally</span><span class="w1">Perfect</span></a></span>
</span>
</div>
</body>
Я экспериментировал с различными комбинациями div s & span s и Displayтакие свойства, как inline-block, но так как мне не ясно, что jQuery делает , я не могу заставить его работать, пока он находится в одной строке.
Есть ли быстрое решение?
Бонусный вопрос: Действительно ли сложно использовать устаревшие теги, такие как <FONT> или <B>?Я не могу представить, что какой-либо браузер позволит им просто «перестать работать» с обновлением в ближайшее время;перевод миллионов старых страниц в нерабочее состояние (хотя их конкуренты все еще поддерживают устаревшие теги) ...?