CODEWITHSUNDEEP
javascriptjqueryhtmlaudiotiming
jordanbain
jordanbain

Reputation: 15

Playing a sound after another jquery event is complete

For an assignment I am supposed to "Write a program that displays the word "Done!" in the center of the screen, beeps, and then erases the word." I got the program to display the word 1 second after the program starts (intentionally), but I have been trying for a while and can't figure out how to play the beep sound one second after the word is displayed. I have gotten the beep sound to play, just not at the correct time. This is the script for the html document:

$(document).ready(function() {

    $("div").delay(1000).fadeTo("2000", 1)

});

Here is the actual HTML document:

<!DOCTYPE html>
<html>
    <head>
        <title>PP1114</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.js"></script>
        <script type="text/javascript" src="PP1114.js"></script>
        <link rel="stylesheet" type="text/css" href="PP1114.css">
    </head>
    <body>
        <div>
            <p id="done">Done!</p>
        </div>
    </body>
</html>

All my CSS does is gives the element an opacity of 0 so it is invisible at first, and then can fade in when the script tells it to:

div {
    opacity: 0;
}

So my question is, how can I get the beep audio to play after the word is displayed. Also, because I am fairly new to jquery, a description on why an example program works would be nice if it gets advanced.

Upvotes: 0

Views: 821

Answers (1)

Cereal Killer
Cereal Killer

Reputation: 3414

If you want something to be executed AFTER the "fadeTo", you just need to use the callback function:

$("div").delay(1000).fadeTo("2000", 1, function() {
     //code for sound execution here
  });
});

The callback function will be executed only when the fadeTo animation ends.

Upvotes: 0

Related Questions