添加颜色后，简单的基于jQuery的ascii动画崩溃

Question

我想创建一个不基于textarea的简单ascii动画。 这是我的代码：

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" />
<title>Simple Animation</title>

<style type="text/css">

  body { white-space: pre; font: 16px monospace; }
  #animation { position: relative; width: 500px; height: 332px; }
  #animation .image { position: absolute; left: 0; top: 0; }

  .red { color: #ee0000; }

</style>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript" >
$(function(){
  $('#animation div.image:gt(0)').hide();
  setInterval(function(){
    $('#animation :first-child').hide()
      .next('div.image').show()
      .end().appendTo('#animation');}, 
    500);
});
</script>

</head>

<body>
<div id="animation">
<div class="image">
XXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXX
</div>

<div class="image">
YYYYYYYYYYYYYYYYYY
YYYYYYYYYYYYYYYYYY
YYYYYYYYYYYYYYYYYY
</div>

<div class="image">
ZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZ
</div>
</div>

</body>

</html>

它完全按照我想要的方式工作。 但是，当我尝试添加一些颜色时，问题就出现了。 如果我改变X'的第一行

<span class="red">XXXXXXXXXXXXXXXXXX</span>

动画变得疯狂，有些线条出现，有些线条没有，有些线条颜色有些，有些线条仍然是黑色等等。当我尝试添加更多颜色时，情况会变得更糟。

我的问题是：为什么会发生这种情况以及如何解决这个问题？ 我不是一个javascript专业人士，我怀疑它可能是选择器的问题，但我自己无法解决它。 谢谢！

Answer 1

原因是使用:first-child而不是:first ; 没有孩子的元素可以工作，如果他们有孩子会破坏你的代码。

while：first只匹配一个元素，：first-child选择器可以匹配多个：每个父元素一个。

所以这：

$('#animation :first-child').hide()

将选择两个元素而不是一个（两个嵌套的子元素），您的代码将分解其动画; 尝试在你的setInterval中放入一个console.log，你会看到差异。

来自docs：

：第一个伪类相当于：eq（0）。 它也可以写成：lt（1）。 虽然这只匹配一个元素，但是：first-child可以匹配多个：每个父元素一个。

演示： http ： //jsfiddle.net/IrvinDominin/VXaNB/

链接问题：区别：第一和：第一个孩子不清楚

Answer 2

在行$('#animation :first-child').hide() ，将选择器:first-child更改为:first ，它应该可以工作。 ;）

否则从长远来看，你不会选择你想要的元素！

Answer 3

正确的答案是使用#animation > :first-child 。

这确保了您获得的唯一元素是#animation的直接后代，并且也是一个合法的CSS3选择器，它不依赖于:first jQuery扩展，因此更高效，更便携。

添加颜色后，简单的基于jQuery的ascii动画崩溃

问题描述

3 个解决方案

解决方案1
1 已采纳 2013-09-15 14:00:38

解决方案2
0 2013-09-15 13:52:32

解决方案3
0 2013-09-15 14:56:30

添加颜色后，简单的基于jQuery的ascii动画崩溃

问题描述

3 个解决方案

解决方案1 1 已采纳 2013-09-15 14:00:38

解决方案2 0 2013-09-15 13:52:32

解决方案3 0 2013-09-15 14:56:30

解决方案1
1 已采纳 2013-09-15 14:00:38

解决方案2
0 2013-09-15 13:52:32

解决方案3
0 2013-09-15 14:56:30