How can I get fadeToggle() to trigger for several DOM elements with a single keypress
<p>I am writing a bit of code for a game that I doing to better learn JS and I have come up against a problem. I am using the jQuery library to perform animations. </p>

<p><strong>What I am trying to do</strong> (see the //Fade out text comment):</p>

<p>I would like to hide 3 <code>&lt;p&gt;</code> tags with unique ids when the player presses the spacebar key. The code I currently have works (sort of) but the snag is that I have to press spacebar once per <code>&lt;p&gt;</code> tag I want to remove whereas I would like to do it with a single press. If I use the text() method then the I only need to press spacebar once to remove all the text in the <code>&lt;p&gt;</code> tags.</p>

<p>Here is my code:</p>

<pre><code>$(document).ready(function() {
    $("body").keypress(
    function(event) {
        if (event.which == 32) {
            if (operator === "+") {
                result = parseInt(firstTerm) + parseInt(secondTerm);
            }
            else if (operator === "-") {
                result = parseInt(firstTerm) - parseInt(secondTerm);
            }
            //reset the player's current expression
            firstTerm = "";
            operator = "";
            secondTerm = "";
            //Fade out the text
            $("p#term1, p#operator, p#term2 ").fadeToggle("slow");
            //$("p#term1, p#operator, p#term2 ").text("");

            //clear the board of any selections
            for (var i = 0; i &lt; tilesSelected.length; i++) {
                $("div#" + tilesSelected[i]).removeClass("tileselected");

            }
            //check to see if the player has scored a point
            if (result === goalNum) {
                alert("You just scored 1 point!");
                score++;
                goalNum = randNumXtoY(1, 30);
                $("div#targetnum").text(goalNum);
            }
            alert(result);
        }
    });
});​
</code></pre>

<p>The html code is here:</p>

<pre><code>            &lt;body&gt;
            &lt;h1&gt;This is my game. Yay!&lt;/h1&gt;
            &lt;div id="container"&gt;

                &lt;div id="currentnum" class="currentstatus"&gt;
                    &lt;p id="term1" class="x"&gt;&lt;/p&gt;
                    &lt;p id="operator" class="x"&gt;&lt;/p&gt;
                    &lt;p id="term2" class="x"&gt;&lt;/p&gt;
                &lt;/div&gt;


                &lt;div id="targetnum" class="currentstatus"&gt;
                    &lt;script type="text/javascript"&gt;
                        document.write("&lt;p&gt;" + goalNum +"&lt;/p&gt;")
                    &lt;/script&gt;
                &lt;/div&gt;

            &lt;/div&gt;



            &lt;/body&gt;
</code></pre>
