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,
- ///* animate code start here currentSlideX_Wrapper manipulation - .slide *///
- var currentSlideX_Wrapper = $this.parents(".slideX"),
- nextSlideX_Wrapper = currentSlideX_Wrapper.next(".slideX");
- //animateInNextSlide
- currentSlideX_Wrapper.removeClass("active");
- currentSlideX_Wrapper.one("transitionend webkitTransitionEnd oTransitionEnd", function() {
- var $this = $(this);
- $this.addClass("displayNoneX");
- });
- currentSlideX_Wrapper.promise().done(function() {
- console.log("css transition ended!!!");
- if (nextSlideX_Wrapper && nextSlideX_Wrapper.hasClass("displayNoneX")) {
- nextSlideX_Wrapper.removeClass("displayNoneX");
- }
- nextSlideX_Wrapper.promise().done(function() {
- setTimeout(function() {
- nextSlideX_Wrapper.addClass("active");
- }, 90);
- });
- });
- ///* 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.