Adding an exit animation to ::Featured Content Glider
Dynamic Drive has a really useful script called Featured Content Glider.
My only complaint was that the layer kept overlapping the previous one instead of a nice flow by having the previous animate out while the new slide animated in.
So what I did was add some lines to the featuredcontentglider.js
1) add “var startingvar = 0;” after “jQuery.noConflict()”
It created a variable that I found useful to know exactly what slide I was on.
2) the if statement following “//Test for toggler not being initialized yet, or user clicks on the currently selected page):” should be replaced with the following if statement:
//Test for toggler not being initialized yet, or user clicks on the currently selected page):
if (config.$togglerdiv.attr('lastselected')==null || parseInt(config.$togglerdiv.attr('lastselected'))!=selected){
var $selectedlink=config.$toc.eq(selected)
config.nextslideindex=(selected<config.$contentdivs.length-1)? selected+1 : 0
config.prevslideindex=(selected==0)? config.$contentdivs.length-1 : selected-1
config.$next.attr('loadpage', config.nextslideindex+"pg") //store slide index to go to when "next" link is clicked on
config.$prev.attr('loadpage', config.prevslideindex+'pg')
if (startingvar != 0){
var $previous=config.$contentdivs.eq(config.prevslideindex)
var startpoint=(config.leftortop=="left")? {left:0} : {top:0} //animate it into view
$previous.css(config.leftortop, startpoint).css("zIndex", this.csszindex)
var endpoint=(config.leftortop=="left")? {left:-config.startpoint} : {top:-config.startpoint} //animate it into view
$previous.animate(endpoint, config.speed)
}
startingvar++;
var startpoint=(isprev=="previous")? -config.startpoint : config.startpoint
$target.css(config.leftortop, startpoint).css("zIndex", this.csszindex++) //hide content so it's just out of view before animating it
var endpoint=(config.leftortop=="left")? {left:0} : {top:0} //animate it into view
$target.animate(endpoint, config.speed)
config.$toc.removeClass('selected')
$selectedlink.addClass('selected')
config.$togglerdiv.attr('lastselected', selected+'pg')
}
And that is pretty much it. This makes the current slide animate out while the new slide comes in. I think this creates a more friendly rotating feature that is less disruptive to the user experience.