Question

如果你能帮我解决这个问题，我将非常感激！

我有10个小文字。我希望每个人都能按顺序淡入淡出。当每段文字达到完全不透明度时，我想要播放铃声。一旦显示了所有十个文本，我就像最后一个文本一样停下来并保持静止。

当用户移动鼠标或使用键盘显示“再次开始”消息以及10条消息的序列再次开始时，我也会喜欢这样。

这在jquery中是否可行？

Answer 1

是的，这是可能的，这里有一些基本步骤。

使用铃声查找或创建WAV文件： Playing sound notifications using Javascript?
jQuery fadeIn documentation - 在您的情况下，您必须使用回调方法来实现“达到完全不透明度”。
要知道所有文本已完成，您可以添加计数器，然后检查它是否达到10。

Answer 2

如果您使用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”形式，那么您可以将它们放入数组中以访问或找到一些其他逻辑方式来增加计数。

文本淡入然后声音并重新启动

2 个答案: