jQuery Forum

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%;
   }