Question

if you could help me out with this I would be really grateful!

I have 10 small pieces of text. I’d like each to fade in and then out in sequence. As each piece of text reaches full opacity, I want a bell sound to play. Once all ten texts have displayed i’d like the last one to stop and remain static.

I’d also like that when the user moves the mouse or uses the keyboard for the message “start again” to appear and for the sequence of 10 messages to begin again.

Is this possible in jquery?

Answer 1

You can accomplish this easiest if you utilize the jQuery sound plugin and .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;
}

If your IDs are not of the form “text1”, then you can put them in an array to access or find some other logical way to increment your count.