启动，停止，重置按钮的Javascript回调功能？

Question

My code currently fades in and out, one word at a time, any text that I add to the h1 tag, it displays within a small box. 我的代码当前淡入和淡出，一次添加一个单词，我添加到h1标签的任何文本，都显示在一个小框中。 I have added 3 buttons that currently have no script attached in order to function. 我添加了3个按钮，这些按钮目前没有任何脚本可以正常运行。

What I want to happen is when someone visits my webpage, they can press Start and the text will fade in and out in the aforementioned box. 我想发生的是，当某人访问我的网页时，他们可以按“开始”，并且文本会在上述框中淡入和淡出。 I would also like visitors to be able to stop and reset the text that I have written in the h1 tag. 我还希望访问者能够停止并重置我在h1标签中写的文本。 All the visitor should see is the 3 buttons and the box upon visiting my site. 访问者在访问我的网站时应该只看到3个按钮和一个方框。 Once they click start the text will fade in and out, centered within the box. 单击开始后，文本将淡入和淡出，居中显示在框内。

In summary I need the 3 buttons within the HTML to function with the current script. 总之，我需要HTML中的3个按钮才能与当前脚本一起使用。 I would be thankful for any help. 感谢您的帮助。

HTML 的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 的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;
}

Script 脚本

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

Maybe something like this: http://jsfiddle.net/j42fL/3/ 也许是这样的： 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 个解决方案

解决方案1
0 已采纳 2014-03-25 23:09:07

启动，停止，重置按钮的Javascript回调功能？

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-03-25 23:09:07

解决方案1
0 已采纳 2014-03-25 23:09:07