How do you make an animation not affect the parent container?

Question

I've just started reading a book on jQuery and was just messing around with animations. If I have a <div> nested in another <div>, how do I stop the nested <div>'s animation from affecting it's parent?

<script type="text/javascript">
      $(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");
            });
      });

Answer 1

Inorder to use the event object you need to add it as a param in your function:

$("#innerDiv").click(function (event) {
    $("#innerDiv").slideUp("fast");
    event.stopPropagation();
});

Answer 2

You have propagation spelled incorrectly.

Yours is stopPropogation