.animate() in ASP.NET MVC not working on every page, any ideas?

.animate() in ASP.NET MVC not working on every page, any ideas?

I am using .animate on the master layout page of an MVC application. All javascript and the divs it manipulates are in the _layout.cshtml page.... the animation works flawlessly on the home page, but if the page is changed, the .animate bits won't work but the .removeClass/.addClass/.html still work.

I initially though it was a binding issue, so I unbound all the event handlers on a redirect and rebound them on page load.....still doesn't work.

Does anyone have any ideas?

jQuery 
  1. $(".navbar-brand").click(function () {
            var windowWidth = $(window).width();
            if (windowWidth > 500) {
                var width = $(".sidePanel").width();
                width = width * -1;
                if ($(".sidePanel").hasClass('active')) {
                    $(".sidePanel").removeClass('active');
                    $(function () {
                        $(".sidePanel").animate({
                            left: width
                        }, 500);
                        $(".container").animate({
                            left: width,
                            width: windowWidth
                        }, { duration: 500, queue: false });
                    });
                } else {
                    $(".sidePanel").addClass('active');
                    $(function () {
                        $(".sidePanel").animate({
                            left: 0
                        }, { duration: 500, queue: false });
                        $(".container").animate({
                            left: 0,
                            width: windowWidth * .85
                        }, { duration: 500, queue: false });
                    });
                    $("#notifBadge").html("");
                }
            } else {
                $(".sidePanel").slideToggle();
            }
        });

HTML 
  1. <a class="navbar-brand" href="#"><img src="../../Content/images/notification128.png"id="notificationIcon" height="32" width="32" alt="Notifications" /><span id="notifBadge" class="badge">3</span></a>

  2. <div class="sidePanel">
            NOTIFICATION AREA
        </div>


CSS

  1. .sidePanel {
    margin: 0 10px 0 0;
    padding: 0;
    background-color: #2780E3;
    width: 15%;
    min-height: 100%;
    position: absolute;
    z-index: 10001;
    left: -15%;
    float: left;
}
  2. .container {
    float: right;
    width: 100%;
}