Animate with Change of CSS Class

Animate with Change of CSS Class

A page I am working on has images that slide around to different positions on the page. When an image reaches a certain position I want to change its appearance by changing the CSS Class applied to it. When I run it (in Firefox) the animations work, but the Class changes do not. I have created a simplified version of my code, below. How do I get the Class changes to take effect?

  1. <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>GT: Welcome Basics</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <style>
    .MainPage {
        position: absolute;
        background: RGB(74,88,105);
        top: 1%;
        left: 10em;
        height: 99%;
        width: 90%;
        z-index: -1;
    }

    .SubPosterImage {
        border: solid thin white;
        background:#0CF;
        position: absolute;
        height: 99%;
        width: 99%;
        top: .5%;
        left: .5%;
        opacity: .6;
    }

    .CenterPosterImage {
        border: solid thin white;
        background:#FF3;
        position: absolute;
        height: 87%;
        width: 85%;
        top: 8%;
        left: 7%;
    }

    .CenterProduction {
        border: solid yellow 3px;
        position: absolute;
        height: 95%;
        width: 50%;
        top: 2%;
        left: 25%;
       
        background: #196CFF;
        z-index: 90;
    }

    .RightProduction {
        border: solid orange 1px;
        position: absolute;
        height: 60%;
        width: 30%;
        top: 15%;
        left: 68%;
       
        z-index: 80;
    }

    .LeftProduction {
        border: solid orange 1px;
        position: absolute;
        height: 60%;
        width: 30%;
        top: 15%;
        left: 3%;
       
        z-index: 80;
    }
        </style>
    </head>

    <body>

    <div class="MainPage">
      <div id="Production1">
          <div><p>This is an image of a poster</p></div>
      </div>
        <script type="text/javascript">
            $(function() {
                var displayDelay = 3000;
                var i = 0;

                $('#Production1').addClass("CenterProduction");
                $('#Production1 div').addClass("CenterPosterImage");

                while ( i < 6 ) {
                   
                   $('#Production1')
                                             .delay(displayDelay)
                                               .animate({height: "60%",
                                                            width: "30%",
                                                            top: "15%",
                                                            left: "68%" }, 2000, "swing")
                                            .removeClass("CenterProduction")
                                            .addClass("RightProduction");
                    $('Production1 div')
                                                    .removeClass("CenterPosterImage")
                                                    .addClass("SubPosterImage");
                   $('#Production1')
                                             .delay(displayDelay)
                                               .animate({height: "60%",
                                                            width: "30%",
                                                            top: "15%",
                                                            left: "3%"}, 2000, "swing")
                                            .removeClass("RightProduction")
                                            .addClass("LeftProduction");
                   $('#Production1')
                                             .delay(displayDelay)
                                               .animate({height: "95%",
                                                            width: "50%",
                                                            top: "2%",
                                                            left: "25%" }, 2000, "swing")
                                            .removeClass("LeftProduction")
                                            .addClass("CenterProduction");
                    $('Production1 div')
                                            .removeClass("SubPosterImage")
                                            .addClass("CenterPosterImage");
                i++; // Increment i
                }//End While Loop//

          });
        </script>
    </div>
    <!--    <button id="btnStart">Start</button>
    -->
    </body>
    </html>