Question

我正在使用下面的代码来制作动画。但是我需要用span来包装第一个单词，这样我就可以改变第一个单词的颜色。我该如何添加跨度？

在jQuery中根本不强，所以任何帮助都会非常感激。谢谢。

jQuery的：

$(function() {
    var num = 0;
    var words = [
        {left: "Slam Your Face", right: "Watch Out"},
        {left: "Death", right: "Death"}
     ];    

    var fadel = $('#fadeL');
    var fader = $('#fadeR');

    animate();

    function animate() {
        var leftword = words[num].left;
        var rightword = words[num].right;

    fadel
        .stop()
        .css('top', '18px')
        .css('left', '0')
        .css('opacity', 0)
        .text(leftword).show();

    fader
        .stop()
        .css('top', '68px')
        .css('left', '400px')
        .css('opacity', 0)
        .text(rightword).show();

    fadel.animate({
        opacity: 1,
        left: (350 - fadel.width()) + 'px'
        }, 3000, function() {
            fadel.fadeOut("fast", function() {
            queueNext();
        });
    });

    fader.animate({
        opacity: 1,
        left: '250px'
    }, 3000, function() {  
            fader.fadeOut("fast");
        });
    }

    function queueNext() {
        if (++num == words.length)
        num = 0;

        animate();
    }
});

Answer 1

请参阅小提琴：http://jsfiddle.net/YxMHx/6/

$(function() {
    var num = 0;
    var someConditionIsTrue = true;
    var words = [
        {left: "Slam Your Face", right: "Watch Out"},
        {left: "Death", right: "Death"}
     ];    

    var fadel = $('#fadeL');
    var fader = $('#fadeR');

    animate();

    function animate() {
        var leftword = words[num].left;
        var rightword = words[num].right;

        var first = leftword.slice(0, leftword.indexOf(" "));

        first = "<span class=\"span_class\">" + first + "</span>";
        var lastWords = leftword.substring(leftword.indexOf(" ") + 1);

        var finalString = first + lastWords;


    fadel
        .stop()
        .css('top', '18px')
        .css('left', '0')
        .css('opacity', 0)
        .html(finalString).show().delay(2000);

    fader
        .stop()
        .css('top', '68px')
        .css('left', '400px')
        .css('opacity', 0)
        .text(rightword).show();

    fadel.animate({
        opacity: 1,
        left: (350 - fadel.width()) + 'px'
        }, 3000, function() {
            fadel.fadeOut("fast", function() {
            queueNext();
        });
    });

    fader.animate({
        opacity: 1,
        left: '250px'
    }, 3000, function() {  
            fader.fadeOut("fast");
        });
    }

    function queueNext() {

        if (++num == words.length)
        num = 0;

        animate();
    }

    queueNext();
});

Answer 2

function spanFirstWord(str) {
    return str.replace(/^(\w+)/, '<span class="first">$1</span>');
}

function animate() {
    var leftword = spanFirstWord(words[num].left);
    var rightword = spanFirstWord(words[num].right);

fadel
    .stop()
    .css('top', '18px')
    .css('left', '0')
    .css('opacity', 0)
    .html(leftword).show();

fader
    .stop()
    .css('top', '68px')
    .css('left', '400px')
    .css('opacity', 0)
    .html(rightword).show();

fadel.animate({
    opacity: 1,
    left: (350 - fadel.width()) + 'px'
    }, 3000, function() {
        fadel.fadeOut("fast", function() {
        queueNext();
    });
});

在jQuery中的var中添加html标记

2 个答案: