jQuery add and remove Class breaks on Chrome

jQuery add and remove Class breaks on Chrome

Hi,

I have this custom slide in animation based on css transitions with add and remove Class.


The code goes like this,
  1. ///*  animate code start here currentSlideX_Wrapper manipulation - .slide *///
  2.                 var currentSlideX_Wrapper = $this.parents(".slideX"),
  3.                     nextSlideX_Wrapper = currentSlideX_Wrapper.next(".slideX"); 
  4.                 //animateInNextSlide
  5.                 currentSlideX_Wrapper.removeClass("active");
  6.                 currentSlideX_Wrapper.one("transitionend webkitTransitionEnd oTransitionEnd", function() {
  7.                     var $this = $(this);
  8.                     $this.addClass("displayNoneX");
  9.                 });
  10.                 currentSlideX_Wrapper.promise().done(function() {
  11.                     console.log("css transition ended!!!");
  12.                     if (nextSlideX_Wrapper && nextSlideX_Wrapper.hasClass("displayNoneX")) {
  13.                         nextSlideX_Wrapper.removeClass("displayNoneX");
  14.                     }
  15.                     nextSlideX_Wrapper.promise().done(function() {
  16.                         setTimeout(function() {
  17.                             nextSlideX_Wrapper.addClass("active");
  18.                         }, 90);
  19.                     });
  20.                 });
  21.             ///* animate code ends here *///

It runs fine on firefox but if you click the back button and play around, it breaks on chrome and the animation goes haywire. I am at a total loss.
Please help.