0

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?

Sarah
  • 15
  • 3

2 Answers2

0

Yes this is possible, here are some basic steps.

Community
  • 1
  • 1
Shadow The GPT Wizard
  • 66,030
  • 26
  • 140
  • 208
0

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.

justkt
  • 14,610
  • 8
  • 42
  • 62
  • THanks very much for this Justkt! I copied exactly but I am having some problems - the texts stack on top of each other and when the mouse/keyboard is moved it doesn't go back to text1. Also, the sound seems to load at the end (infinitely!). Do you have any idea what might cause this? – Sarah Apr 28 '11 at 16:25
  • @Sarah - you might want to look to understand what each component is doing to understand why things happen. I don't know how you want your text to be laid out, but by default a `
    ` is displayed as a [block](http://www.quirksmode.org/css/display.html). The sound indefinitely at the end is because I didn't put a stop to it. You'll need to use [setTimeout](https://developer.mozilla.org/en/window.setTimeout) and call stop using `$.fn.soundPlay({playerId: 'embed_player', command: 'stop'});` as shown. As for the mouse/keyboard interaction, I'd have to test some.
     – justkt Apr 28 '11 at 17:01
  • @Sarah - [check out this example where it is working](http://jsfiddle.net/G4F92/1/). – justkt Apr 28 '11 at 17:10