jquery - 文本淡入，然后发出声音并重新启动

Question

如果您能帮我解决这个问题，我将不胜感激!

我有10小段文字。我希望每个人先淡入然后依次淡出。当每段文字都变得完全不透明时，我想播放铃声。一旦显示了所有十个文本，我希望最后一个文本停止并保持不变。

我还希望当用户移动鼠标或使用键盘时，出现“再次开始”消息，并再次显示10条消息的序列。

在jQuery中这可能吗？

Answer 1

如果您使用jQuery sound plugin和.fadeIn()，则可以最轻松地完成此操作

Javascript:

var loopRunning = false;
$(document).ready(function() {

    loopRunning = true;
    // start the first fade in
    fadeInToSound(1);

    // bind to mousemove or keypress
    $(document).bind('mousemove keypress', function() {
        if(!loopRunning) {
            loopRunning = true;
            $("#container .hidden").hide();
            $("#startAgain").show();
            // start the fades over again
            fadeInToSound(1);
        }
    });

});

/**
 * Handles fading in a single div of text and, if the ID passed in is less
 * then ten, recurses to fade the next div in.
 * If the ID is greater than one, stops the last sound
 */
function fadeInToSound(idNum) {
    // if this is not the first ID, stop the last sound
    if(idNum > 1) {
        $.fn.soundPlay({playerId: 'embed_player', command: 'stop'});
    }
    // fade in the div "text<idNum>"
    $("#text" + idNum).fadeIn(500, function() {
        // use the jQuery sound plugin to play the sound
        $.fn.soundPlay({url: 'music/bell.wav',
            playerId: 'embed_player',
            command: 'play'});
        // if this isn't the last ID, recurse to do the next one
        if(idNum < 10) {
            fadeInToSound(idNum + 1);
        } else {
            loopRunning = false;
            setTimeout("$.fn.soundPlay({playerId: 'embed_player', command: 'stop'});", 500);
        }
    });
}

HTML:

<!-- The div to show the start again text -->
<div id="startAgain" class="hidden">Start Again</div>
<!-- The text divs -->
<div id="container">
    <div id="text1" class="hidden">Text 1</div>
    <div id="text2" class="hidden">Text 2</div>
    <div id="text3" class="hidden">Text 3</div>
    <div id="text4" class="hidden">Text 4</div>
    <div id="text5" class="hidden">Text 5</div>
    <div id="text6" class="hidden">Text 6</div>
    <div id="text7" class="hidden">Text 7</div>
    <div id="text8" class="hidden">Text 8</div>
    <div id="text9" class="hidden">Text 9</div>
    <div id="text10" class="hidden">Text 10</div>
</div>

CSS:

.hidden {
    display: none;
}

如果您的ID的格式不是“text1”，则可以将它们放在数组中以访问或找到其他逻辑方法来增加计数。