How do you make an animation not affect the parent container?
<p>I've just started reading a book on jQuery and was just messing around with animations. If I have a <code>&lt;div&gt;</code> nested in another <code>&lt;div&gt;</code>, how do I stop the nested <code>&lt;div&gt;</code>'s animation from affecting it's parent?</p>

<pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function(){

            $("#outerDiv").click(function () {
                $("#outerDiv").slideUp("slow");
            });

            $("#innerDiv").click(function () {
                $("#innerDiv").slideUp("fast");
                //event.stopPropogation(); thought this would work, guess not
            });

            $("p").click(function () {
                $("div").slideDown("slow");
            });
      });
</code></pre>
