当我用更多 替换 标签时，淡入淡出 jQuery 中断

Question

我有一个来自借用代码（来自 here/here）的时髦 jQuery 交叉淡入淡出文本轮播，我通过外部 html 动态生成的 Included html 提供格式化文本=86=]。正是我需要的效果。

事实是，它工作正常...但是只有如果我使用大量  标签来获得所需的格式（每个单词有几种颜色)。我反复读到我不使用  是必要的，因为它已被弃用，因此会让婴儿哭泣或发生其他事情。

正在工作的 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， 但它 'breaks' 轮播 ，大概是因为我需要额外的 s 应用格式，而 jQuery 使用 's 作为短语旋转的分隔符。

损坏的 MCVE：

注意唯一的区别是<style>的3行和中的3行。

$("#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>

我一直在试验 divs & spans 和 Display 属性的各种组合，例如 inline-block，但由于我不清楚 jQuery 是什么 正在做，我仍然在一条线上无法正常工作。

有快速修复方法吗？

奖金问题： 使用  或  等已弃用的标签真的很重要吗？我无法想象任何浏览器都会允许他们 "stop working" 很快更新；使数百万个旧页面无法使用（而他们的竞争对手仍然支持已弃用的标签）...?

Answer 1

$("#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 1s 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>

您需要使用 > 到 select 只有直系子 span 而不是 $("#caption > span:eq(" + captionIdx + ")").fadeOut("slow"); 和 [=17= 中的所有后代 span ].由于您没有使用 > 所有内部 span 也是动画的，这就是为什么您会看到这种奇怪的效果。

当我用更多 <span> 替换 <font> 标签时，淡入淡出 jQuery 中断

Crossfading jQuery breaks when I replace <font> tags with more <span>'s

html

javascript

css

jquery

fade

正在工作的 MCVE：

损坏的 MCVE：