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

时间:2011-04-28 12:56:08

标签: jquery text audio fade restart

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

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

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

这在jquery中是否可行?

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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