3

我想创建一个不基于 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'es 的第一行更改为

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

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

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

4

3 回答 3

1

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

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

所以这：

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

将选择两个元素而不是一个（两个嵌套的子元素），并且您的代码会分解其动画；尝试将 console.log 放入 setInterval 中，您会看到不同之处。

来自文档：

:first 伪类等价于 :eq(0)。它也可以写成:lt(1)。虽然这仅匹配一个元素，但 :first-child 可以匹配多个：每个父元素一个。

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

相关问题：:first 和 :first-child 之间的区别不清楚

于 2013-09-15T14:00:38.290 回答
0

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

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

于 2013-09-15T13:52:32.240 回答
0

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

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

于 2013-09-15T14:56:30.090 回答