Question

我的代码目前淡入淡出，一次一个字，我添加到h1标签的任何文本，它显示在一个小方框内。我添加了3个按钮，这些按钮目前没有附加脚本以便运行。

我想要发生的是当有人访问我的网页时，他们可以按开始，文本将在上述框中淡入淡出。我还希望访问者能够停止并重置我在h1标签中写入的文本。访问我的网站时，所有访问者都应该看到3个按钮和框。一旦他们点击开始，文本将淡入和淡出，在框内居中。

总之，我需要HTML中的3个按钮才能使用当前脚本。我会感谢任何帮助。

HTML

<body>
<div class="box">
    <div id="title"><span id="name">Title</span> 
    </div>
    <div id="message"/>
    <div id="greeting"/>
        <input type="button" value="Start" id="start" />
        <input type="button" value="Stop" id="stop"/>
        <input type="button" value="Reset" id="reset" />
         <h1><center>This is a test. This is only a test.</center></h1>
    </div>
</body>

CSS

.box {
    border:1px solid #E38E34;
    background-color: #FFE7BF;
    height:150px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#title {
    margin:5px;
    border-bottom:1px solid #E38E34;
    color:#C46908;
    font-weight:bold;
}
#message {
    margin:5px;
}
center {
    font-size: 50px;
}

脚本

var h1 = $('div#greeting h1');

h1.hide().contents().each(function () {
    var words;
    if (this.nodeType === 3) {
        words = '<span> ' + this.data.split(/\s+/).join(' </span><span> ') + ' </span>';
        $(this).replaceWith(words);
    } else if (this.nodeType === 1) {
        this.innerHTML = '<span> ' + this.innerHTML.split(/\s+/).join(' </span><span> ') + ' </span>';
    }
});

h1.find('span').hide().each(function () {
    if (!$.trim(this.innerHTML)) {
        $(this).remove();
    }
});

h1.show().find('span').each(function (i) {
    $(this).delay(600 * i).fadeIn(200).fadeOut(200);
});

Answer 1

也许是这样的：http://jsfiddle.net/j42fL/3/

var h1 = $('div#greeting h1');

$.setAnim = function(h1) {
    h1.hide().html('<center>This is a test. This is only a test.</center>').contents().each(function () {
        var words;
        if (this.nodeType === 3) {
            words = '<span> ' + this.data.split(/\s+/).join(' </span><span> ') + ' </span>';
            $(this).replaceWith(words);
        } else if (this.nodeType === 1) {
            this.innerHTML = '<span> ' + this.innerHTML.split(/\s+/).join(' </span><span> ') + ' </span>';
        }
    });
}

$.startAnim = function(h1) {
    h1.find('span').hide().each(function () {
        if (!$.trim(this.innerHTML)) {
            $(this).remove();
        }
    });
    h1.show().find('span').each(function (i) {
        $(this).delay(600 * i).fadeIn(200).fadeOut(200);
    });
}

$.stopAnim = function(h1) {
    h1.find('span').stop(true, true);
}

$.resetAnim = function(h1) {
    $.stopAnim(h1);
    $.setAnim(h1);
}

$.setAnim(h1);

$('#start').click(function(){ $.startAnim(h1); });
$('#stop').click(function(){ $.stopAnim(h1); });
$('#reset').click(function(){ $.resetAnim(h1); });

用于启动，停止，重置按钮的Javascript-回调函数？

1 个答案: