I am helping
to build a site and i'm having an issue with
the functionality of an add-in called jsplitslider when running it in chrome. Right now, when I navigate between
the slides,
the div's get stuck on top of each other and never clear
the webkit transformations/animations:
<div class="sl-content-slice" style="transition: all 800ms ease-in-out; -webkit-transition: all 800ms ease-in-out;">
I think
the problem is due
to timing of
the functions, but I can't seem
to figure out where I would need
to add a setTimeout(). I only think this because I exhausted a lot of
the other options like display: inline-block, notransitions css, etc.
I'm desperate
to figure out how
to make this work in chrome. It works in FF and IE(surprisingly enough). I'm not great at webcoding, so any help will be appreciated!
The code on
the site isn't minimized.
Here is
the jQuery where I think
the problem lies:
var cssStyle = config.orientation === 'horizontal' ? {
marginTop : -this.size.height / 2
} : {
marginLeft : -this.size.width / 2
},
// default slide's slices style
resetStyle = {
'transform' : 'translate(0%,0%) rotate(0deg) scale(1)',
opacity : 1
},
// slice1 style
slice1Style = config.orientation === 'horizontal' ? {
'transform' : 'translateY(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg) scale(' + config.slice1scale + ')'
} : {
'transform' : 'translateX(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg) scale(' + config.slice1scale + ')'
},
// slice2 style
slice2Style = config.orientation === 'horizontal' ? {
'transform' : 'translateY(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')'
} : {
'transform' : 'translateX(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')'
};
if( this.options.optOpacity ) {
slice1Style.opacity = 0;
slice2Style.opacity = 0;
}
// we are adding
the classes sl-trans-elems and sl-trans-back-elems
to the slide that is either coming "next"
// or going "prev" according
to the direction.
//
the idea is
to make it more interesting by giving some animations
to the respective slide's elements
//( dir === 'next' ) ? $nextSlide.addClass( 'sl-trans-elems' ) : $currentSlide.addClass( 'sl-trans-back-elems' );
$currentSlide.removeClass( 'sl-trans-elems' );
var transitionProp = {
'transition' : 'all ' + this.options.speed + 'ms ease-in-out'
};
// add
the 2 slices and animate them
$movingSlide.css( 'z-index', this.slidesCount )
.find( 'div.sl-content-wrapper' )
.wrap( $( '<div class="sl-content-slice" />' ).css( transitionProp ) )
.parent()
.cond(
dir === 'prev',
function() {
var slice = this;
this.css( slice1Style );
setTimeout( function() {
slice.css( resetStyle );
}, 150 );
},
function() {
var slice = this;
setTimeout( function() {
slice.css( slice1Style );
}, 150 );
}
)
.clone()
.appendTo( $movingSlide )
.cond(
dir === 'prev',
function() {
var slice = this;
this.css( slice2Style );
setTimeout( function() {
$currentSlide.addClass( 'sl-trans-back-elems' );
if( self.support ) {
slice.css( resetStyle ).on( self.transEndEventName, function() {
self._onEndNavigate( slice, $currentSlide, dir );
} );
}
else {
self._onEndNavigate( slice, $currentSlide, dir );
}
}, 150 );
},
function() {
var slice = this;
setTimeout( function() {
$nextSlide.addClass( 'sl-trans-elems' );
if( self.support ) {
slice.css( slice2Style ).on( self.transEndEventName, function() {
self._onEndNavigate( slice, $currentSlide, dir );
} );
}
else {
self._onEndNavigate( slice, $currentSlide, dir );
}
}, 150 );
}
)
.find( 'div.sl-content-wrapper' )
.css( cssStyle );
$nextSlide.show();
},
_validateValues : function( config ) {
// OK, so we are restricting
the angles and scale values here.
// This is
to avoid
the slices wrong sides
to be shown.
// you can adjust these values as you wish but make sure you also ajust
the
// paddings of
the slides and also
the options.translateFactor value and scale data attrs
if( config.slice1angle > this.options.maxAngle || config.slice1angle < -this.options.maxAngle ) {
config.slice1angle = this.options.maxAngle;
}
if( config.slice2angle > this.options.maxAngle || config.slice2angle < -this.options.maxAngle ) {
config.slice2angle = this.options.maxAngle;
}
if( config.slice1scale > this.options.maxScale || config.slice1scale <= 0 ) {
config.slice1scale = this.options.maxScale;
}
if( config.slice2scale > this.options.maxScale || config.slice2scale <= 0 ) {
config.slice2scale = this.options.maxScale;
}
if( config.orientation !== 'vertical' && config.orientation !== 'horizontal' ) {
config.orientation = 'horizontal'
}
},
_onEndNavigate : function( $slice, $oldSlide, dir ) {
// reset previous slide's style after next slide is shown
var $slide = $slice.parent(),
removeClasses = 'sl-trans-elems sl-trans-back-elems';
// remove second slide's slice
$slice.remove();
// unwrap..
$slide.css( 'z-index', 10 )
.find( 'div.sl-content-wrapper' )
.unwrap();
// hide previous current slide
$oldSlide.hide().removeClass( removeClasses );
$slide.removeClass( removeClasses );
// now we can navigate again..
this.isAnimating = false;
this.options.onAfterChange( $slide, this.current );
},
Sorry if I missed any conventions when posting, this is my first S.O. post. Thanks in advance for any help.
