Question

我有一个执行动画onload的span元素。在这个span元素中，还有另一个我想要修改的元素。我曾尝试使用CSS来执行此操作，但我无法在不中断动画的情况下访问它。

HTML

<span id="sometext"><a class="sd" href="#">Click here.</a></span>

<div id="btn">decrypt
    <div>

CSS

body {
width: 80%;
font-family: monospace;
background-color: #000;
}
.code {
color: #0a0;
word-break: break-all;
}
#sometext {
color: white;
}
.sd {
color: #000;
cursor: pointer;
}
#btn {
width: 60px;
height: 20px;
color: red;
padding: 15px;
border: #fff 2px solid;
cursor: pointer;
}

链接：http://jsfiddle.net/v9p34o1z/

所有帮助表示赞赏！

Answer 1

我不确定你要做什么，将此添加到您的CSS不会破坏动画（至少对我而言）

#sometext {
    color: blue;
    cursor: pointer;
}

Answer 2

要修改这些文本，首先将它们包装在span标记中，以便您可以将它们作为目标。然后使用CSS并将以下行添加到jquery

 $("#sometext").addClass("yellow");

将其添加到CSS并根据需要进行修改

 .yellow{
     color:yellow !important;
 }

检查 UPDATED DEMO

Answer 3

不使用.text来更改范围，而是使用.html，否则html会被删除或呈现为文本。

function animate(element, options) {
var text = element.html(),
    text_only = element.text(),
    span = $("<span/>").addClass(options.className).insertAfter(element),
    interval = options.duration / (text_only.length * options.stepsPerGlyph),
    step = 0,
    length = 0,
    stepper = function () {
        if (++step % options.stepsPerGlyph === 0) {
            length++;
            element.html(text.slice(0, length));
        }
        if (length <= text.length) {
            span.html(randomString(options.codeGlyphs, text_only.length - length));
            setTimeout(stepper, interval);
        } else {
            span.remove();
        }
    };
element.text("");
stepper();
}

如何修改范围内的元素

3 个答案: